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 is the core interactive element in @prokodo/ui. It unterstützt text labels, icon-only mode, loading states, full-width layout, and seamless redirect (SSR-safe link conversion).

---

Ü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 is a discriminated union of ButtonDefaultProps (labeled button) and ButtonIconProps (icon-only button).

ButtonDefaultProps

Prop	Typ	Standard	Pflicht	Beschreibung
title	string	—	✅	Button label text (also used as fallback aria-label).
variant	"contained" | "outlined" | "text"	"contained"	—	Visual style variant.
color	"primary" | "secondary" | "success" | "error" | "info" | "warning" | "inherit"	"inherit"	—	Semantic color token.
priority	boolean	false	—	Emphasize the button (higher visual weight).
fullWidth	boolean	false	—	Stretch button to 100% of parent width.
loading	boolean	false	—	Show loading spinner and disable interaction.
disabled	boolean	false	—	Deaktiviere all interaction.
iconProps	IconProps	—	—	Icon to display left of (or alongside) the label.
redirect	LinkProps	—	—	Convert button into an SSR-safe link.
aria-label	string	title	—	Override accessible label.
ref	ButtonRef	—	—	Ref to the underlying <button> element.
contentClassName	string	—	—	CSS class on the inner content wrapper.
className	string	—	—	CSS-Klasse am Root-Element.
onClick	MouseEventHandler	—	—	Click handler.
image	ImageProps	—	—	Background image (alternative to icon).

ButtonIconProps

Icon-only variant. Requires either aria-label (interactive) or inert (decorative).

Prop	Typ	Standard	Pflicht	Beschreibung
iconProps	IconProps	—	✅	Icon to render.
aria-label	string	—	✅*	Accessible label for screen readers.
inert	boolean	—	✅*	Mark as decorative (no a11y label needed).

* Either aria-label or inert must be provided (not both).

---

Design-Tokens

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

Token	Standard	Beschreibung
--pk-button-bg	var(--pk-color-surface-raised)	Standard-Hintergrundfarbe (Contained/Inherit-Fallback).
--pk-button-fg	var(--pk-color-fg)	Standard-Text-/Icon-Farbe.
--pk-button-shadow	none	Basis-Schatten; farbige Glow-Schatten werden automatisch gesetzt.
--pk-button-radius	var(--pk-radius-md)	Rahmen-Radius.
--pk-button-padding-x	var(--pk-space-lg)	Horizontales Padding.
--pk-button-padding-y	var(--pk-space-md)	Vertikales Padding.
--pk-button-disabled-bg	—	Hintergrundfarbe im deaktivierten Zustand (optional).
--pk-button-disabled-fg	var(--pk-color-muted)	Textfarbe im deaktivierten Zustand (optional).

Deaktivierter Zustand verwendet standardmäßig opacity: 0.45 und pointer-events: none. Überschreibe --pk-button-disabled-bg / --pk-button-disabled-fg nur, wenn ein abweichendes Erscheinungsbild gewünscht ist (z. B. bei Brand-Vorgaben statt reduzierter Deckkraft).
Ladezustand zeigt einen Inline-Spinner, der die Textfarbe des Buttons übernimmt (currentColor), und sperrt die Pointer-Interaktion mit cursor: progress.

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.

AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente. Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).

---

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-Assertion(s) in 4 Testdatei(en) · 1 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

Explore all Button variants, controls, and a11y annotations live:

👉 Button in Storybook öffnen

---

Quellcode

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