# UI: Button

> Button and IconButton, in the four variants of the desktop.

Source: https://pithyx.org/docs/reference/sdk/ui/button/
Markdown: https://pithyx.org/docs/reference/sdk/ui/button.md

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](https://pithyx.org/docs/sdk/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](#button): React Aria's button props plus the look.

#### Extends

- `Omit`\<`AriaButtonProps`, `"className"` \| `"children"`\>

#### Properties

##### variant?

```ts
optional variant?: ButtonVariant;
```

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

##### size?

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

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

##### className?

```ts
optional className?: string;
```

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

##### children?

```ts
optional children?: ReactNode;
```

The label, an icon or both.

---

### IconButtonProps

The props of [IconButton](#iconbutton).

#### Extends

- `Omit`\<[`ButtonProps`](#buttonprops), `"aria-label"`\>

#### Properties

##### variant?

```ts
optional variant?: ButtonVariant;
```

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

###### Inherited from

[`ButtonProps`](#buttonprops).[`variant`](#variant)

##### size?

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

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

###### Inherited from

```ts
Omit.size;
```

##### className?

```ts
optional className?: string;
```

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

###### Inherited from

[`ButtonProps`](#buttonprops).[`className`](#classname)

##### children?

```ts
optional children?: ReactNode;
```

The label, an icon or both.

###### Inherited from

[`ButtonProps`](#buttonprops).[`children`](#children)

##### label

```ts
label: string;
```

Accessible name, also shown as tooltip.

##### tooltip?

```ts
optional tooltip?: boolean;
```

Hides the tooltip where the label is already visible nearby.

## Type Aliases

### ButtonVariant

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

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

## Functions

### Button()

```ts
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`](#buttonprops) | React Aria's button props plus `variant` and `size`. |

#### Returns

`Element`

The button element.

#### Example

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

---

### IconButton()

```ts
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`](#iconbuttonprops) | The props of [Button](#button) plus `label` and `tooltip`. |

#### Returns

`Element`

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

#### Example

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