UI: Button

Button und IconButton in den vier Varianten des Desktops. Importiere die Token-Datei einmal (@pithyx/ui/tokens.css) und umschließe die App mit UiProvider; siehe @pithyx/ui.

Beim Build aus den TSDoc-Kommentaren von @pithyx/ui 1.0.0-rc.9 erzeugt; der Text unter den Überschriften ist der Kommentar im Quelltext und bleibt Englisch.

Schnittstellen

ButtonProps

The props of Button: React Aria’s button props plus the look.

Erweitert

• Omit<AriaButtonProps, "className" | "children">

Eigenschaften

variant?

optional variant?: ButtonVariant;

How much the button stands out; secondary when left out.

size?

optional size?: "md" | "sm";

sm for dense rows and toolbars; md when left out.

className?

optional className?: string;

Extra class names, added after the button’s own.

children?

optional children?: ReactNode;

The label, an icon or both.

---

IconButtonProps

The props of IconButton.

Erweitert

• Omit<ButtonProps, "aria-label">

Eigenschaften

variant?

optional variant?: ButtonVariant;

How much the button stands out; secondary when left out.

Geerbt von

ButtonProps.variant

size?

optional size?: "md" | "sm";

sm for dense rows and toolbars; md when left out.

Geerbt von

Omit.size;

className?

optional className?: string;

Extra class names, added after the button’s own.

Geerbt von

ButtonProps.className

children?

optional children?: ReactNode;

The label, an icon or both.

Geerbt von

ButtonProps.children

label

label: string;

Accessible name, also shown as tooltip.

tooltip?

optional tooltip?: boolean;

Hides the tooltip where the label is already visible nearby.

Typenaliasse

ButtonVariant

type ButtonVariant = 'primary' | 'secondary' | 'quiet' | 'danger';

How much a button stands out: primary for the main action, danger for a destructive one.

Funktionen

Button()

function Button(props): Element;

A button in the desktop’s look. Use onPress instead of onClick, so keyboard, touch and screen readers act alike, and isPending for an action that runs.

Parameter

Parameter	Typ	Beschreibung
props	ButtonProps	React Aria’s button props plus variant and size.

Rückgabewert

Element

The button element.

Beispiel

<Button variant="primary" onPress={save}>
  Save
</Button>

---

IconButton()

function IconButton(props): Element;

A button that shows only an icon; its label is announced and shown as a tooltip. quiet when no variant is set.

Parameter

Parameter	Typ	Beschreibung
props	IconButtonProps	The props of Button plus label and tooltip.

Rückgabewert

Element

The button, wrapped in a tooltip trigger unless tooltip is false.

Beispiel

<IconButton label="Delete" onPress={remove}>
  <IconTrash size={18} />
</IconButton>