aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/buttons/button/button.mdx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-12-15 18:35:16 +0100
committerArmand Philippot <git@armandphilippot.com>2023-12-15 18:49:49 +0100
commit0f936ec0e7606cb79434d94096b6e113a7ce78eb (patch)
tree465ec7f66ac9459be6a18ac046e10357814c7b92 /src/components/atoms/buttons/button/button.mdx
parent4e4d2eb25365be861e19f9756cf334ba2faa6911 (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.mdx80
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} />