# components/button (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/button.ts](https://github.com/Tahul/zidane/blob/main/ui/src/components/button.ts).

## Functions

### `buttonClass`

Function.

The button look as a class string, for `<button>`, `<a>` or a router link alike.

```ts
function buttonClass(
  options?: { flush?: 'start' | 'end'; size?: ButtonSize; variant?: ButtonVariant },
): string
```

**Parameters**

- `options?` (`{ flush?: 'start' | 'end'; size?: ButtonSize; variant?: ButtonVariant }`, default `{}`): The variant, size and flush alignment of the button. Defaults to a `secondary`,
  `md` button.

**Returns** `string`: The class string for the button look.

Source: [ui/src/components/button.ts:77](https://github.com/Tahul/zidane/blob/main/ui/src/components/button.ts#L77)

## Constants

### `BTN_DANGER`

Constant.

In-row destructive action (Remove / Delete / Clear): quiet until hovered.

```ts
const BTN_DANGER = ...
```

Source: [ui/src/components/button.ts:105](https://github.com/Tahul/zidane/blob/main/ui/src/components/button.ts#L105)

### `BTN_DANGER_CONFIRM`

Constant.

Armed destructive confirm (Confirm remove / Confirm delete): the danger fill.

```ts
const BTN_DANGER_CONFIRM = ...
```

Source: [ui/src/components/button.ts:108](https://github.com/Tahul/zidane/blob/main/ui/src/components/button.ts#L108)

### `BTN_LG_DANGER`

Constant.

Destructive dialog footer action (Delete session, Deny): the danger fill.

```ts
const BTN_LG_DANGER = ...
```

Source: [ui/src/components/button.ts:120](https://github.com/Tahul/zidane/blob/main/ui/src/components/button.ts#L120)

### `BTN_LG_PRIMARY`

Constant.

Primary header action or form submit, soft accent.

```ts
const BTN_LG_PRIMARY = ...
```

Source: [ui/src/components/button.ts:114](https://github.com/Tahul/zidane/blob/main/ui/src/components/button.ts#L114)

### `BTN_LG_SECONDARY`

Constant.

Secondary header / footer action (Refresh / Cancel …): the accent button stays rightmost.

```ts
const BTN_LG_SECONDARY = ...
```

Source: [ui/src/components/button.ts:111](https://github.com/Tahul/zidane/blob/main/ui/src/components/button.ts#L111)

### `BTN_LG_SOLID`

Constant.

The committing action of a dialog footer: accent fill.

```ts
const BTN_LG_SOLID = ...
```

Source: [ui/src/components/button.ts:117](https://github.com/Tahul/zidane/blob/main/ui/src/components/button.ts#L117)

### `BTN_PRIMARY`

Constant.

In-row primary action (Sign in / Retry / Import …): soft accent, not a slab.

```ts
const BTN_PRIMARY = ...
```

Source: [ui/src/components/button.ts:102](https://github.com/Tahul/zidane/blob/main/ui/src/components/button.ts#L102)

### `BTN_SECONDARY`

Constant.

In-row secondary action (Edit / Update / Sign out / Keep / Cancel …).

```ts
const BTN_SECONDARY = ...
```

Source: [ui/src/components/button.ts:99](https://github.com/Tahul/zidane/blob/main/ui/src/components/button.ts#L99)

## Types

### `ButtonVariant`

Type.

Look of a button: `secondary` (raised chip), `primary` (soft accent wash), `solid` (accent fill
for the committing action of a dialog), `ghost` (text only), `danger` (muted red) and
`danger-solid` (danger fill for the destructive commit).

```ts
type ButtonVariant =
  | 'secondary'
  | 'primary'
  | 'solid'
  | 'ghost'
  | 'danger'
  | 'danger-solid'
```

Source: [ui/src/components/button.ts:60](https://github.com/Tahul/zidane/blob/main/ui/src/components/button.ts#L60)