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.
Auf dieser Seite
Playground
Variante
Größe
Zustand
Hintergrund
<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
<button type="button" class="feitio-button" data-variant="primary">Salvar alterações</button>Standard
Jede andere Aktion. Bei Unsicherheit ist es diese.
Code anzeigen
<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
<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
<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
<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
- Kasten: Feitios ungleiche Ecken und die 1px Tintenlinie.
- Symbol, optional: immer vor dem Wort.
- Label: Verb und Objekt.
- 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
Ein einziger Orange mit Verb und Objekt.
Don’t
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 einemtype: 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. |