Button
Un bouton exécute une action sur l'écran où il se trouve : sauvegarder, ouvrir, supprimer. Pour aller vers une autre page, c'est un lien.
Sur cette page
Playground
Variante
Taille
État
Fond
<button class="feitio-button" type="button">Enregistrer</button>Quand l'utiliser
- Pour une action qui se produit ici : sauvegarder, envoyer, ouvrir un Dialog.
- Pour l'action principale d'un formulaire, à sa fin.
Quand ne pas l'utiliser
- Pour aller vers une autre page : utilisez un lien, même s'il ressemble à une action.
- Plusieurs oranges sur un seul écran : n'en n'est que le principal.
Exemples
Primaire
L'action pour laquelle l'écran existe. Orange, et au maximum un par écran.
Afficher le code
<button type="button" class="feitio-button" data-variant="primary">Salvar alterações</button>Par défaut
Toute autre action. En cas de doute, c'est celle-là.
Afficher le code
<button type="button" class="feitio-button">Cancelar</button>Danger
Actions qui détruisent ou ne peuvent pas être annulées. Vin rouge, jamais orange, et toujours avec un Dialog avant d'agir.
Afficher le code
<button type="button" class="feitio-button" data-variant="danger">Apagar agendamento</button>Avec icône
L'icône précède le mot et l'accompagne, jamais à sa place.
Afficher le 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>Tailles
Petit pour les barres et outils, par défaut pour presque tout, grand pour l'action d'une page entière.
Afficher le 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>Anatomie
- Boîte : Les coins inégaux de Feitio et la ligne d'encre de 1px.
- Icône, optionnel : toujours avant le mot.
- Étiquette : verbe et objet.
- Mise en surbrillance : la bordure orange, chaque fois que le clavier arrive.
États
- Survol : le papier se soulève un peu.
- Focus: le contour orange, dès l'arrivée du clavier.
- Waiting: dit ce qu'il fait ("Enregistrement…") et ignore un autre appui.
Faire et ne pas faire
Do
Un seul orange, avec verbe et objet.
Don’t
Deux oranges et un "OK" qui ne dit rien.
Écriture
- Verbe et objet : "Enregistrer les modifications", "Supprimer le calendrier". Jamais "OK" ou "Oui".
- Deux ou trois mots ; majuscule uniquement au premier.
Accessibilité
- C'est un vrai
<button>, avec untype: les claviers et les lecteurs d'écran le connaissent déjà. - Seul l'icône, sans mot, obtient une
aria-label. - Une cible d'au moins 40px, même en petite taille.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-button" | obligatoire | Le bouton Feitio. |
data-variant | "primary", "danger" | Primaire (orange) ou danger (vin). Sans cela, le défaut. |
data-size | "small", "large" | Petit (32px, 40px au toucher) ou grand (52px). |
aria-busy | "true" | Pendant que l'action se déroule : elle attend et ignore un autre clic. |