Buttons
One orange button for the main action. Outline and ghost for the rest.
The variant says how important the action is. The label says exactly what happens.
Sizes
When to use
- Primary (orange): the one main action of a page or dialog, like “New invoice” or “Save”
- Outline: secondary actions next to it, like Cancel, Export and Print
- Ghost: toolbars, table rows and icon-only buttons
- Destructive: the confirm button inside a delete confirmation
- Link: actions inside a sentence
When not to use
- Two orange buttons on the same screen
- Vague labels like Submit, OK or Yes; use a verb and a noun
- A destructive button that deletes on the first click; confirm first