Search…
Search…
Button
Live
Buttons guide users toward action by signalling priority through a clear hierarchy of styles — primary, secondary, and tertiary ensuring the most important actions stand out while supporting alternatives remain visible but unobtrusive.
AA
WCAG 2.1 accessibility compliant
Button
Live
Buttons guide users toward action by signalling priority through a clear hierarchy of styles — primary, secondary, and tertiary ensuring the most important actions stand out while supporting alternatives remain visible but unobtrusive.
AA
WCAG 2.1 accessibility compliant
Button
Buttons guide users toward action by signalling priority through a clear hierarchy of styles — primary, secondary, and tertiary ensuring the most important actions stand out while supporting alternatives remain visible but unobtrusive.
Live in Storybook
Live in Storybook
Live in Storybook
View Figma Designs
View Figma Designs
View Figma Designs
When to use | When not to use |
|---|---|
✅ Primary actions | ⛔️ For navigation |
✅ Secondary actions | ⛔️ When there’s no clear action |
✅ Tertiary actions | ⛔️ Too many buttons at once. |
Anatomy
Element | Description |
|---|---|
| Container of the button component |
| Label text of the button component |
Sizes
Spacing
Variants
Action Types
States
Icon & Icon Right
Disabled
When to use | When not to use |
|---|---|
✅ Primary actions | ⛔️ For navigation |
✅ Secondary actions | ⛔️ When there’s no clear action |
✅ Tertiary actions | ⛔️ Too many buttons at once. |
Anatomy
Element | Description |
|---|---|
| Container of the button component |
| Label text of the button component |
Sizes
Spacing
Variants
Action Types
States
Icon & Icon Right
Disabled
When to use | When not to use |
|---|---|
✅ Primary actions | ⛔️ For navigation |
✅ Secondary actions | ⛔️ When there’s no clear action |
✅ Tertiary actions | ⛔️ Too many buttons at once. |
Anatomy
Element | Description |
|---|---|
| Container of the button component |
| Label text of the button component |
Sizes
Spacing
Variants
Action Types
States
Icon & Icon Right
Disabled
Continue reading
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.
Get in touch
Got a project in mind? Let’s chat. I’m always keen to hear about new ideas, collaborations, or challenges you’re looking to solve. Drop me a message and we can explore how to bring your vision to life together.