diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-12-15 18:35:16 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-12-15 18:49:49 +0100 |
| commit | 0f936ec0e7606cb79434d94096b6e113a7ce78eb (patch) | |
| tree | 465ec7f66ac9459be6a18ac046e10357814c7b92 /src/components/atoms/buttons/button/button.mdx | |
| parent | 4e4d2eb25365be861e19f9756cf334ba2faa6911 (diff) | |
refactor(stories): migrate stories to CSF3 format
Diffstat (limited to 'src/components/atoms/buttons/button/button.mdx')
| -rw-r--r-- | src/components/atoms/buttons/button/button.mdx | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/src/components/atoms/buttons/button/button.mdx b/src/components/atoms/buttons/button/button.mdx new file mode 100644 index 0000000..d90156e --- /dev/null +++ b/src/components/atoms/buttons/button/button.mdx @@ -0,0 +1,80 @@ +import { ArgTypes, Canvas, Meta, Primary } from '@storybook/blocks'; +import * as ButtonStories from './button.stories'; + +<Meta of={ButtonStories} /> + +# Button + +<Primary /> + +## Kind + +The button appearance can change depending on its kind. + +### Primary + +<Canvas of={ButtonStories.Primary} /> + +### Secondary (default) + +<Canvas of={ButtonStories.Secondary} /> + +### Tertiary + +<Canvas of={ButtonStories.Tertiary} /> + +### Neutral + +<Canvas of={ButtonStories.Neutral} /> + +## States + +It can either: +* be enabled, +* be disabled +* indicate a loading state, +* indicate a pressed state. + +### Enabled (default) + +<Canvas of={ButtonStories.Enabled} /> + +### Disabled + +<Canvas of={ButtonStories.Disabled} /> + +### Loading + +<Canvas of={ButtonStories.Loading} /> + +### Pressed + +<Canvas of={ButtonStories.Pressed} /> + +## Shapes + +It can either: +* be a circle, +* be a rectangle +* be a square, +* or conserves its initial shape. + +### Circle + +<Canvas of={ButtonStories.Circle} /> + +### Rectangle (default) + +<Canvas of={ButtonStories.Rectangle} /> + +### Square + +<Canvas of={ButtonStories.Square} /> + +### Initial + +<Canvas of={ButtonStories.Initial} /> + +## Props + +<ArgTypes of={ButtonStories} /> |
