# 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.

## Playground

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

```html
<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

1.  **Boîte :** Les coins inégaux de Feitio et la ligne d'encre de 1px.
2.  **Icône**, optionnel : toujours avant le mot.
3.  **Étiquette :** verbe et objet.
4.  **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

Enregistrer les modificationsAnnuler

Un seul orange, avec verbe et objet.

Don’t

OKAnnuler

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 un `type` : 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.