Button

Props

• children
  ReactNode

  Die Beschriftung des Buttons: zuerst ein Verb, in Satzschreibung.

• count
  number

  Eine Zahl nach der Beschriftung.

• disabledReason
  string

  Warum der Button deaktiviert ist, als Tooltip. Der Button bleibt fokussierbar, damit man es lesen kann.

• fullWidth
  boolean

  Füllt die Breite seines Containers.

• href
  string

  Rendert einen Link, der wie der Button aussieht.

• icon
  IconSvgElement

  Der einzige Inhalt eines Symbol-Buttons; dazu ein aria-label angeben.

• leadingIcon
  IconSvgElement

  Ein Symbol vor dem Text.

• loading
  boolean

  Die Arbeit läuft: Der Button ist sofort beschäftigt und ignoriert Klicks; der Spinner erscheint erst nach 300ms und bleibt dann mindestens 400ms (useDelayedLoading). Er ersetzt das führende Symbol oder überdeckt die Beschriftung; die Breite ändert sich nie.

• rel
  string

  Die Beziehung des Links, wie bei einem a-Element.

• reserveLabels
  ReactNode[]

  Jede Beschriftung, die dieser Button zeigen kann („Schlüssel kopieren“, „Kopiert“). Der Button behält die Breite der breitesten, damit ihn ein Zustandswechsel nie verändert.

• shape
  "pill" | "circle"

  Buttons nur mit Symbol sind Kreise und brauchen einen zugänglichen Namen.

• shortcut
  string[] | string[][]

  Ein Tastenkürzel nach der Beschriftung (lg und xl sowie in Menüs).

• size
  "md" | "xs" | "sm" | "lg" | "xl"

  Die Höhe, von xs (24px) bis xl (44px).

• target
  string

  Wo der Link sich öffnet, wie bei einem a-Element.

• trailingIcon
  IconSvgElement

  Ein Symbol nach dem Text.

• variant
  "danger" | "link" | "secondary" | "primary" | "ghost" | "quiet" | "soft" | "danger-secondary"

  primary für die eine Hauptaktion einer Ansicht, secondary für andere, ghost und quiet für Werkzeugleisten, danger für zerstörerische Aktionen.