Universell einsetzbar

Button funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/button) — die Library erkennt die Umgebung automatisch.

Button

Die Button-Komponente ist das zentrale interaktive Element in @prokodo/ui. Sie unterstützt drei gleich große visuelle Varianten, sieben semantische Farben, Icons vor oder nach dem Label, Icon-only, Ladezustände, volle Breite und SSR-sichere Redirect-Links.

---

Übersicht

import { Button } from "@prokodo/ui/button"
;<Button
  title="Click Me"
  color="primary"
  variant="contained"
  onClick={handleClick}
/>

Live PreviewOpen in Storybook ↗

---

Import

import { Button } from "@prokodo/ui/button"

CSS (import once at app root):

import "@prokodo/ui/button.css"

---

Props

ButtonProps ist eine Discriminated Union aus ButtonDefaultProps (Button mit Label) und ButtonIconProps (Icon-only).

ButtonDefaultProps

Prop	Typ	Standard	Pflicht	Beschreibung
title	string	—	✅	Sichtbares Label und Fallback für aria-label.
variant	"contained" | "outlined" | "text"	"contained"	—	Visual style variant.
color	"primary" | "secondary" | "success" | "error" | "info" | "warning" | "inherit"	"primary"	—	Semantische Farbe.
priority	boolean	false	—	Hydriert die interaktive Island sofort; ohne visuellen Effekt.
fullWidth	boolean	false	—	Streckt den Button auf 100 % der Elternbreite.
loading	boolean	false	—	Zeigt den Spinner und sperrt Interaktionen.
disabled	boolean	false	—	Deaktiviert alle Interaktionen.
iconProps	IconProps	—	—	Bestehendes Icon neben dem Label.
iconPosition	"start" | "end"	"start"	—	Positioniert das Icon vor oder nach dem Label.
redirect	LinkProps	—	—	Rendert einen geometrisch identischen SSR-sicheren Link.
aria-label	string	title	—	Überschreibt den zugänglichen Namen.
ref	ButtonRef	—	—	Ref auf das zugrunde liegende <button>-Element.
contentClassName	string	—	—	CSS-Klasse auf dem inneren Content-Wrapper.
className	string	—	—	CSS-Klasse am Root-Element.
onClick	MouseEventHandler	—	—	Click-Handler.
image	ImageProps	—	—	Inline-Bild als Alternative zu iconProps.

ButtonIconProps

Die Icon-only-Variante benötigt entweder aria-label (interaktiv) oder inert (dekorativ).

Prop	Typ	Standard	Pflicht	Beschreibung
iconProps	IconProps	—	✅	Zu renderndes Icon.
aria-label	string	—	✅*	Zugänglicher Name für Screenreader.
inert	boolean	—	✅*	Markiert das Element als dekorativ.

* Entweder aria-label oder inert angeben, nicht beides.

---

Design-Tokens

Passe Button über CSS Custom Properties auf :root oder einem übergeordneten Element an.

Layout und Typografie

Token	Standard	Beschreibung
--pk-button-bg	var(--pk-color-surface-raised)	Standard-Oberfläche als Fallback.
--pk-button-fg	var(--pk-color-fg)	Standard-Text-/Icon-Farbe als Fallback.
--pk-button-font-weight	600	Schriftgewicht des Labels.
--pk-button-shadow	var(--pk-shadow-sm)	Basis-Schatten als Fallback.
--pk-button-radius	var(--pk-radius-pill)	Gemeinsamer Radius aller Varianten.
--pk-button-padding-x	var(--pk-space-xl)	Horizontales Padding.
--pk-button-padding-y	1rem	Vertikales Padding für Contained, Outlined und Text.
--pk-button-min-height	3.25rem	Gemeinsame Höhe; Icon-only nutzt sie auf beiden Achsen.

Material und Bewegung

Token	Standard	Beschreibung
--pk-button-hover-lift	-2px	Vertikale Hover-Bewegung.
--pk-button-press-scale	0.985	Kompression im Active-State.
--pk-button-motion-duration	240ms	Dauer der Haupttransition.
--pk-button-motion-easing	cubic-bezier(0.22, 1, 0.36, 1)	Easing der Haupttransition.
--pk-button-sheen-duration	560ms	Dauer des Contained-Sheen.
--pk-button-sheen-opacity	0.32	Stärke des Contained-Sheen.
--pk-button-contained-bottom-glow	rgb(255 255 255 / 58%)	Weicher innerer Bloom in der unteren Hälfte.
--pk-button-contained-shadow-strength	22% (30% bei Primary)	Semantische Elevation im Ruhezustand.
--pk-button-contained-hover-shadow-strength	30% (38% bei Primary)	Semantische Elevation beim Hover.

Semantische Token-Familien

Token-Familie	Beschreibung
--pk-button-contained-background-{color}	Oberflächen der Contained-Buttons.
--pk-button-contained-foreground-{color}	Solide Icon- und Fallback-Farbe.
--pk-button-contained-ink-{color}	Label-Verlauf für Contained.
--pk-button-content-{color}	Label-/Icon-Verlauf für Outlined und Text.
--pk-button-content-fallback-{color}	Solider Fallback, falls Gradient-Text nicht verfügbar ist.

{color} steht für inherit, primary, secondary, success, info, warning oder error. Light und Dark Mode tauschen die relevanten Werte automatisch. Contained verwendet im Dark Mode ein weicheres Charcoal statt reinem Schwarz.

app/globals.css

.checkoutCta {
  --pk-button-contained-background-primary: linear-gradient(
    112deg,
    #4aa8ff,
    #43ecff
  );
  --pk-button-contained-bottom-glow: rgb(255 255 255 / 64%);
}

Deaktivierter Zustand: opacity: 0.5, reduzierte Sättigung und pointer-events: none. Ladezustand: setzt aria-busy="true", hält das Label zur Größenstabilität sichtbar und ergänzt einen Spinner mit currentColor.

---

Varianten und Icons

<Button title="Primäre Aktion" color="primary" variant="contained" />
<Button title="Sekundäre Aktion" color="primary" variant="outlined" />
<Button title="Leise Aktion" color="primary" variant="text" />

<Button
  title="Weiter"
  iconProps={{ name: "ArrowRight01Icon" }}
  iconPosition="end"
/>

<Button
  aria-label="Weiter"
  iconProps={{ name: "ArrowRight01Icon" }}
/>

Contained, Outlined und Text besitzen dieselbe Mindesthöhe. Icon-only verwendet denselben Wert als quadratische Touch-Fläche.

Redirect-Verhalten

Mit redirect wird das Root-Element zu einem BaseLink-Anchor. Klassen, Content-Wrapper, Maße, Theme und Interaktionszustände bleiben identisch zum nativen Button.

<Button
  title="Report öffnen"
  iconProps={{ name: "ArrowRight01Icon" }}
  iconPosition="end"
  redirect={{ href: "/report", target: "_self" }}
/>

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { Button } from "@prokodo/ui/button"

Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.

priority hydriert die Button-Island sofort, statt auf Sichtbarkeit zu warten. Farbe, Elevation, Größe und andere visuelle Eigenschaften ändern sich dadurch nicht.

---

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
2.1.1	Tastatur (A)	🔍 Manuell prüfen	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.4.3	Fokusreihenfolge (A)	🔍 Manuell prüfen	Die Tastaturfokus-Reihenfolge muss im vollständigen seitenseitigen Integrationskontext Bedeutung und Bedienbarkeit erhalten.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
2.4.11	Fokus nicht verdeckt (Min.) (AA)	🔍 Manuell prüfen	Die fokussierte Komponente darf nicht vollständig durch Sticky-Header, Overlays oder andere positionierte Seitenelemente verdeckt sein.
2.5.3	Label im Namen (A)	✅ Erfüllt	Bei Komponenten mit sichtbarem Label muss der zugängliche Name den sichtbaren Labeltext enthalten oder diesem entsprechen.
2.5.8	Zielgröße (Minimum) (AA)	🔍 Manuell prüfen	Interaktive Zielbereiche müssen mindestens 24 × 24 CSS-Pixel groß sein. Prüfung in der integrierten Produkt-UI erforderlich.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 5 jest-axe-Assertions in der Button-Testsuite sowie Redirect- und Icon-only-Tests für zugängliche Namen. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

Alle Button-Varianten, Controls und A11y-Hinweise live ansehen:

👉 Button in Storybook öffnen

---

Quellcode

TypeScript-Typen: src/components/button/Button.model.ts