# Swatch

Un échantillon d'une couleur, avec une ligne de texte autour, à côté de son nom.

## Playground

```html
<span class="feitio-inline" data-gap="2"><span class="feitio-swatch" style="--swatch: var(--feitio-color-accent)"></span><code>accent</code></span>
```

## Quand l'utiliser

-   Pour afficher une couleur dans la documentation : les rôles de couleurs, un tableau de jetons.

## Quand ne pas l'utiliser

-   **Pour indiquer un statut** dans une interface : l'étiquette, avec icône et mot.

## Exemples

### Côté du nom

L'échantillon est de la taille du texte et suit le thème : il change tout seul de jour en nuit.

Afficher le code

```html
<span class="feitio-swatch" style="--swatch: var(--feitio-color-accent)"></span><code>accent</code>
```

## Accessibilité

-   L'échantillon va de pair (il est décoratif) ; le nom de la couleur, à côté, est ce qui se lit.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-swatch"`

obligatoire

Le petit carré avec la ligne d'encre.

`--swatch`

une couleur Feitio

La couleur de l'échantillon.