# Swatch

Ein Farbproben mit einer Tintenlinie darum, neben dem Namen.

## Playground

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

## Wann verwenden

-   Um eine Farbe in der Dokumentation anzuzeigen: die Farbtöne, ein Token-Tabell.

## Wann nicht verwenden

-   **Einen Status** in einer Benutzeroberfläche anzeigen: das Tag, mit Symbol und Wort.

## Beispiele

### Neben dem Namen

Die Probe ist so groß wie der Text und folgt dem Thema: sie wechselt von selbst von Tag zu Nacht.

Code anzeigen

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

## Barrierefreiheit

-   Die Probe geht mit (sie ist Dekoration); der Name der Farbe, neben ihr, ist das, was gelesen wird.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-swatch"`

erforderlich

Kleines Quadrat mit Tintenlinie.

`--swatch`

eine Feitio-Farbe

Die Farbe der Probe.