Buttons
Pick the variant, then stop. The theme does the rest.
Variants
With a leading icon
Icon only - IconButton, never a Button with just an icon in it
Disabled
Hovered
Variants mean something
| The one action, or the thing thats on or chosen. One per view, ideally. | |
| A neutral filled control. A resting toggle, a button welded to a field, the selected nav item. | |
| A normal action that isnt the main one. Cancel, Retry, Previous and Next. | |
| Chrome, toolbars, nav items, row actions. Anything that shouldnt compete. | |
| The confirm button of a destructive dialog. | |
| A destructive trigger that isnt a filled slab. Remove, Revoke, Delete in a row. | |
| Inline, in running copy. |
Use it for
- Dialogs: Cancel is outline, confirm is primary or destructive.
- Retry after an error, and an empty state's call to action: outline.
- Panel header actions: a ghost IconButton, each in a Tooltip.
- An action in a settings row: ghost. In a property row: secondary.
Dont
- Bold a button label, or colour its text or icon by hand.
- Hand-colour a ghost button red. Thats what ghost destructive is for.
- Set an alignment unless the button is stretched wider than its label.
- Force a compact density on a button to make it fit.