Button
A button performs an action on the screen it is on: save, open, delete. To go to another page, it is a Link.
On this page
Playground
Variant
Size
State
Background
<button class="feitio-button" type="button">Save changes</button>When to use
- For an action that happens here: save, send, open a Dialog.
- For the main action of a form, at its end.
When not to use
- To go to another page: use a Link, even if it looks like an action.
- Several oranges on one screen: only one is the main action.
Examples
Primary
The action the screen exists for. Orange, and at most one per screen.
Show code
<button type="button" class="feitio-button" data-variant="primary">Salvar alterações</button>Default
Every other action. When in doubt, it is this one.
Show code
<button type="button" class="feitio-button">Cancelar</button>Danger
Actions that destroy or cannot be undone. Wine, never orange, and always with a Dialog before acting.
Show code
<button type="button" class="feitio-button" data-variant="danger">Apagar agendamento</button>With icon
The icon comes before the word and goes with it, never in its place.
Show code
<button type="button" class="feitio-button">
<svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-plus"/></svg>
Novo agendamento
</button>Sizes
Small for bars and tools, default for almost everything, large for the action of a whole page.
Show code
<button type="button" class="feitio-button" data-size="small">Pequeno</button>
<button type="button" class="feitio-button">Padrão</button>
<button type="button" class="feitio-button" data-size="large">Grande</button>Anatomy
- Box: Feitio’s uneven corners and the 1px ink line.
- Icon, optional: always before the word.
- Label: verb and object.
- Focus: the orange outline, whenever the keyboard arrives.
States
- Hover: the paper lifts a little.
- Focus: the orange outline, whenever the keyboard arrives.
- Waiting: says what it is doing ("Saving…") and ignores another tap.
Do and don’t
Do
A single orange, with verb and object.
Don’t
Two oranges and an "OK" that says nothing.
Writing
- Verb and object: "Save changes", "Delete schedule". Never "OK" or "Yes".
- Two or three words; capitalize the first only.
Accessibility
- It is a real
<button>, with atype: keyboards and screen readers already know it. - Icon only, with no word, gets an
aria-label. - A target of at least 40px, even when small.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-button" | required | The Feitio button. |
data-variant | "primary", "danger" | Primary (orange) or danger (wine). Without it, the default. |
data-size | "small", "large" | Small (32px, 40px touch) or large (52px). |
aria-busy | "true" | While the action runs: it waits and ignores another tap. |