Button

Löst eine Aktion aus – in drei Gewichtungen: Primary, Secondary, Tertiary.

Zweck

Für Aktionen wie Absenden, Buchen oder Abbrechen. Primary (Coral) sparsam einsetzen – in der Regel eine Primary-Aktion pro Section; Nebenaktionen daneben sind Secondary oder Tertiary.

Farben: Coral ist der Primary-Aktion vorbehalten. Sky steht für Secondary und Tertiary – diese Buttons stehen oft direkt neben einem Primary – und außerdem für Auswahl-Zustände. Was einen Zustand zeigt (aktiver Filter, gewähltes Segment), ist kein Button, sondern ein Filter Chip oder ein Segmented Control; auch dort Sky, nie Coral.

Anatomie

Teil	Klasse	Pflicht
Button	.button + Gewichtung (.button--primary …)	ja
Beschriftung	Textinhalt des <button> bzw. <a>	ja

Als Element <button> für Aktionen, <a> für Navigation (Links im Button-Look). .button setzt text-decoration: none, damit beides gleich aussieht.

Varianten

Achse	Werte	Klasse
emphasis	primary · secondary · tertiary	.button--primary · .button--secondary · .button--tertiary
size	s (40, Standard) · m (48) · l (56)	– · .button--m · .button--l
Textgröße	Standard (textStyle.label) · body.m (16px) · body.l (18px)	– · .button--body-m · .button--body-l

• Primary (Coral): Fläche action.primary, Text text.inverse, fett.
• Secondary (Sky-Outline): kein Fill, Rahmen 1px border.accent2, Text text.accent2, fett.
• Tertiary (Ghost): kein Fill, kein Rahmen, Text text.accent2, weight.medium (damit er neben Fließtext nicht untergeht).
• Größen: S ist der Standard und genauso hoch wie alle Controls (Input, Chip, Segmented) – deshalb in einer Reihe immer kombinierbar. M für hervorgehobene Buttons, z. B. den Hero-CTA. L nur als Ausnahme: prominenter Button allein in einer Section, z. B. auf Landingpages. Mit der Größe wächst die Schrift: S textStyle.label, M textStyle.body.m (16px), L textStyle.body.l (18px).
• Die Textgröße ist mit jeder Gewichtung kombinierbar (.button.button--primary.button--body-l). Höhe, Innenabstand und Radius bleiben gleich, nur die Schrift skaliert. Tertiary bleibt dabei weight.medium.

Zustände

Achse	Werte	Umsetzung
interaction	none · hover · focusVisible · active	:hover, :focus-visible, :active
availability	enabled · disabled	:disabled oder aria-disabled="true"

Gewichtung	hover	active
Primary	action.primary.hover	action.primary.active
Secondary	Tint fill.accent2.subtle	wie hover
Tertiary	State-Layer fill.neutral.subtle	wie hover

focusVisible: Outline 2px border.focus mit 2px Abstand – nicht während active, damit beim Klicken kein Ring aufblitzt.

.is-hover, .is-focus-visible und .is-active gibt es nur, um Zustände in Vorschau und Playground statisch zu zeigen. Im Produkt nicht verwenden.

Tokens

Eigenschaft	Token
Höhe	S size.button.s (= size.control.m, 40) · M size.button.m (48) · L size.button.l (56)
Innenabstand	space.inset.s (vertikal) / space.inset.m (horizontal); L horizontal space.inset.l
Radius	radius.control.m
Schrift	S textStyle.label · M textStyle.body.m · L textStyle.body.l; weight.bold (Tertiary: weight.medium)
Primary Fläche	color.action.primary.none · .hover · .active
Primary Text	color.text.inverse
Secondary Rahmen / Text	color.border.accent2 / color.text.accent2
Secondary Hover	color.fill.accent2.subtle
Tertiary Text	color.text.accent2
Tertiary Hover	color.fill.neutral.subtle
Fokus	color.border.focus
Deaktiviert	opacity.disabled

Die Höhe regiert vertikal, der Innenabstand horizontal. box-sizing: border-box, damit Secondary (1px Rahmen) genauso hoch ist wie Primary.

Barrierefreiheit

• Sichtbarer Fokus bei Tastaturbedienung (:focus-visible).
• Weißer Text auf Coral liegt nahe 3:1 – deshalb ist das Label immer fett. Für normalen Fließtext auf Coral wäre Stufe 700 nötig (≥ 4.5:1).
• aria-disabled="true" statt disabled, wenn der Button fokussierbar bleiben soll (z. B. um zu erklären, warum er nicht geht).

Do / Don't

• ✅ Primary sparsam: in der Regel eine pro Section
• ✅ S als Standard; L nur, wenn der Button allein in einer Section steht
• ✅ Kurze, aktive Beschriftung („Termin buchen“, nicht „Hier klicken“)
• ✅ Secondary/Tertiary für Nebenaktionen wie „Abbrechen“
• ❌ action.primary (Coral) für Auswahl-Zustände – Zustände sind Sky
• ❌ Mehrere Primary-Buttons nebeneinander
• ❌ L neben anderen Controls oder in dichten Bereichen
• ❌ Weißer Text auf Coral in normalem Gewicht

Grenzfälle

• disabled + hover / active: werden nicht gestaltet (CSS schließt deaktivierte Buttons aus).
• active + focusVisible: der Fokusring wird während des Drückens ausgeblendet.