Buttons
Triggers an action, or allows the user to advance a state. Where the user interacts with the screen.
Tone and Voice#
Keep in mind the Authority we want to transmit with our voice. Buttons are where the action takes place. We're always sure where we want to direct our users to, so they accomplish their goals. There's no space for ambiguity in the actions we guide them to take, we convey decisiveness.
👍 Dos#
- Buttons should be completely straight-forward. Absolutely no room for ambiguity.
- The verb used for the label must reflect the exact action that the button triggers. Avoid using "CONFIRM", and use "PUBLISH" instead, for example.
Grammar#
- Avoid using more than 3 words.
- Buttons should be in all caps.
- Text buttons should use Title case.
- Prefer imperative verbs.
- No punctuation.
Default examples#
So we have consistency throughout the actions that buttons represent, we suggest that you use the following verbs when crafting buttons.
| EN | PT | ES |
|---|---|---|
| Create | Criar | Crear |
| Edit | Editar | Editar |
| Search | Buscar | Buscar |
| Save | Salvar | Guardar |
| Delete | Excluir | Excluir |
Icons as buttons#
- When using icons as buttons, be mindful of accessibility, always include descriptions in the alt tag.
- Pay attention to the icon's use in other screens, be consistent of what action it represents.
💡Example: "←", "⚙️Settings"