Design
Button
A Button triggers an action or an event.
Copy component
Edit page
Variants
The default button has a standard gray color. You can switch to a tinted variant to apply custom colors.
Default
Primary
Danger
Success
With Icon
Buttons support an icon either before or after the label via the icon props. Avoid using both icons in a button at the same time.
Edit
Delete
Message
Sign up
Icon Only
Buttons support an icon either before or after the label via the icon props. Avoid using both icons in a button at the same time.
Design
Button
A Button triggers an action or an event.
Copy component
Edit page
Variants
The default button has a standard gray color. You can switch to a tinted variant to apply custom colors.
Default
Primary
Danger
Success
With Icon
Buttons support an icon either before or after the label via the icon props. Avoid using both icons in a button at the same time.
Edit
Delete
Message
Sign up
Icon Only
Buttons support an icon either before or after the label via the icon props. Avoid using both icons in a button at the same time.
Button
A Button triggers an action or an event.
Copy component
Edit page
Variants
The default button has a standard gray color. You can switch to a tinted variant to apply custom colors.
Default
Primary
Danger
Success
With Icon
Buttons support an icon either before or after the label via the icon props. Avoid using both icons in a button at the same time.
Edit
Delete
Message
Sign up
Icon Only
Buttons support an icon either before or after the label via the icon props. Avoid using both icons in a button at the same time.