# Button

Ein Button führt eine Aktion auf dem Bildschirm aus, auf dem er sich befindet: speichern, öffnen, löschen. Um zu einer anderen Seite zu gehen, ist es ein Link.

## Playground

```html
<button class="feitio-button" type="button">Änderungen speichern</button>
```

## Wann verwenden

-   Für eine Aktion, die hier stattfindet: speichern, senden, ein Dialog öffnen.
-   Für die Hauptaktion eines Formulars, am Ende desselben.

## Wann nicht verwenden

-   **Zum Wechseln auf eine andere Seite:** verwenden Sie einen Link, auch wenn er wie eine Aktion aussieht.
-   **Mehrere Orangen auf einem Bildschirm:** nur einer ist die Hauptaktion.

## Beispiele

### Haupt

Die Aktion, für die der Bildschirm existiert. Orange und maximal einer pro Bildschirm.

Code anzeigen

```html
<button type="button" class="feitio-button" data-variant="primary">Salvar alterações</button>
```

### Standard

Jede andere Aktion. Bei Unsicherheit ist es diese.

Code anzeigen

```html
<button type="button" class="feitio-button">Cancelar</button>
```

### Gefahr

Handlungen, die zerstören oder nicht rückgängig gemacht werden können. Wein, nie orange und immer mit einem Dialog vor dem Handeln.

Code anzeigen

```html
<button type="button" class="feitio-button" data-variant="danger">Apagar agendamento</button>
```

### Mit Symbol

Das Symbol kommt vor dem Wort und geht damit einher, niemals an seiner Stelle.

Code anzeigen

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

### Größen

Klein für Balken und Werkzeuge, Standard für fast alles, groß für die Aktion einer ganzen Seite.

Code anzeigen

```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.  **Kasten:** Feitios ungleiche Ecken und die 1px Tintenlinie.
2.  **Symbol**, optional: immer vor dem Wort.
3.  **Label:** Verb und Objekt.
4.  **Fokus:** der orange Rahmen, sobald die Tastatur ankommt.

## States

-   **Hovern:** das Papier hebt sich ein wenig.
-   **Fokus:** der orangene Rahmen, sobald die Tastatur ankommt.
-   **Warten:** sagt, was es tut ("Speichern…") und ignoriert einen weiteren Berührungsabdruck.

## Do and don't

Do

Änderungen speichernAbbrechen

Ein einziger Orange mit Verb und Objekt.

Don’t

OKAbbrechen

Zwei Oranges und ein "OK", das nichts sagt.

## Schreiben

-   Verb und Objekt: "Änderungen speichern", "Terminplan löschen". Niemals "OK" oder "Ja".
-   Zwei oder drei Wörter; nur das erste Wort großschreiben.

## Barrierefreiheit

-   Es ist ein echtes `<button>`, mit einem `type`: Tastaturen und Screenreader kennen es bereits.
-   Nur Icon, ohne Wort, bekommt ein `aria-label`.
-   Ein Ziel von mindestens 40px, auch bei kleiner Größe.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-button"`

erforderlich

Der Feitio Button.

`data-variant`

`"primary"`, `"danger"`

Primär (orange) oder Gefahr (weinrot). Ohne es das Standard.

`data-size`

`"small"`, `"large"`

Klein (32px, 40px Touch) oder groß (52px).

`aria-busy`

`"true"`

Während die Aktion läuft: sie wartet und ignoriert einen weiteren Tap.