When to use
Use a button when the user performs an action on the current page.
Loading…
Find components, patterns, tokens, and docs
Documentation
A button is the primary way a user commits to something on the current page: save, submit, confirm, or start a process.
Place one clear primary button per view. Pair it with a quieter secondary or ghost action when a safe alternative is needed.
Appearance is not enough. This is the contract for when the control earns a place in the product.
Use a button when the user performs an action on the current page.
Use a link when the user navigates to another page or resource.
Provides a clear and predictable way to perform an action.
Buttons must be reachable by keyboard, expose a visible focus ring, and have an accessible name. Disabled buttons should not steal focus. Loading buttons should announce busy state.
<Button
variant="primary"
size="medium"
icon="arrow-right"
>
Continue
</Button>