Button
The primary way to trigger an action. Large, comfortable touch targets with generous padding. Depth is left to Surface, so a button reads as a control rather than a panel.
Preview
States
default
hover
active
disabled
loading
Properties
PropTypeDescription
variant"primary" | "secondary" | "text" | "icon" = "primary"Visual emphasis of the action.
loadingboolean = falseSwaps the icon for a spinner and blocks interaction.
iconReactNodeLeading icon rendered before the label.
disabledboolean = falseDims the button and removes pointer events.
Code
React + Tailwind. Copy it into your project — no install required.
<Button variant="primary" icon={<PlusIcon />}>
Create project
</Button>