# UI: Button

> Button und IconButton in den vier Varianten des Desktops.

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

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

#### Erweitert

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

#### Eigenschaften

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

#### Erweitert

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

#### Eigenschaften

##### variant?

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

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

###### Geerbt von

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

##### size?

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

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

###### Geerbt von

```ts
Omit.size;
```

##### className?

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

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

###### Geerbt von

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

##### children?

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

The label, an icon or both.

###### Geerbt von

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

## Typenaliasse

### ButtonVariant

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

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

## Funktionen

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

#### Parameter

| Parameter | Typ                           | Beschreibung                                         |
| --------- | ----------------------------- | ---------------------------------------------------- |
| `props`   | [`ButtonProps`](#buttonprops) | React Aria's button props plus `variant` and `size`. |

#### Rückgabewert

`Element`

The button element.

#### Beispiel

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

#### Parameter

| Parameter | Typ                                   | Beschreibung                                               |
| --------- | ------------------------------------- | ---------------------------------------------------------- |
| `props`   | [`IconButtonProps`](#iconbuttonprops) | The props of [Button](#button) plus `label` and `tooltip`. |

#### Rückgabewert

`Element`

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

#### Beispiel

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