Flint Components
Button
Buttons start an action. Flint has four: primary, secondary, danger and text.
Example
Light
Dark
When to use
- Use a button to do something: save, delete, open a dialog, start a flow.
- Use a link to go somewhere. If it changes the URL, it is a link.
Variants and states
| Variant or state | Use |
|---|---|
| Primary | The main action in a view. One per view. |
| Secondary | Every other action next to a primary one. |
| Danger | Actions that destroy something. Always followed by a confirm step. |
| Text | Low-emphasis actions in dense areas, like table rows and toolbars. |
Guidance
One primary button per view. Everything else is secondary or text.
Line up two primary buttons and make people guess which one matters.
Label with a verb that says what happens: "Save trip", "Delete trip".
Use "OK" or "Submit". People should know the result before they click.
When a button is disabled, say why next to it.
Disable a button with no explanation and leave people stuck.