UI: Button

Button and IconButton, in the four variants of the desktop. Import the token file once (@pithyx/ui/tokens.css) and wrap the app in UiProvider; see @pithyx/ui.

Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

Interfaces

ButtonProps

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

Extends

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

Properties

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.

Extends

• Omit<ButtonProps, "aria-label">

Properties

variant?

optional variant?: ButtonVariant;

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

Inherited from

ButtonProps.variant

size?

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

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

Inherited from

Omit.size;

className?

optional className?: string;

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

Inherited from

ButtonProps.className

children?

optional children?: ReactNode;

The label, an icon or both.

Inherited from

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.

Type Aliases

ButtonVariant

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

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

Functions

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.

Parameters

Parameter	Type	Description
props	ButtonProps	React Aria’s button props plus variant and size.

Returns

Element

The button element.

Example

<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.

Parameters

Parameter	Type	Description
props	IconButtonProps	The props of Button plus label and tooltip.

Returns

Element

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

Example

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