# Button

_Box Kite 2.2.5 · a markdown copy of https://www.box-kite.dev/button/_

Interactive button component with multiple variants, states, and customization options.

**Import**

```jsx
import Button from '@box-kite/react/components/button';
```

**Basic Button**

```jsx
<Flex gap={4} flexWrap="wrap">
  <Button>Click me!</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="ghost">Ghost</Button>
</Flex>
```

**Disabled State**

```jsx
<Flex gap={4}>
  <Button disabled>Disabled</Button>
  <Button variant="secondary" disabled>Disabled</Button>
</Flex>
```

**With Counter**

```jsx
const [counter, setCounter] = useState(0);

<Flex gap={4} ai="center">
  <Button onClick={() => setCounter((c) => c + 1)}>Clicked {counter} times</Button>
  <Button variant="secondary" onClick={() => setCounter(0)}>
    Reset
  </Button>
</Flex>
```

**Custom Styling**

```jsx
<Flex gap={4} flexWrap="wrap">
  <Button
    bgColor="emerald-500"
    hover={{ bgColor: 'emerald-600' }}
    theme={{ dark: { bgColor: 'emerald-500', hover: { bgColor: 'emerald-600' } } }}
  >
    Success
  </Button>
  <Button
    bgColor="rose-500"
    hover={{ bgColor: 'rose-600' }}
    theme={{ dark: { bgColor: 'rose-500', hover: { bgColor: 'rose-600' } } }}
  >
    Danger
  </Button>
  <Button bgImage="gradient-accent">Gradient</Button>
</Flex>
```

**Sizes**

```jsx
<Flex gap={4} ai="center" flexWrap="wrap">
  <Button py={2} px={3} fontSize={12}>Small</Button>
  <Button>Default</Button>
  <Button py={4} px={8} fontSize={16}>Large</Button>
</Flex>
```

## Button props

Everything below is this component’s own. All 235 of Box’s style props work on it too, and those are on [/box](https://www.box-kite.dev/box.md) rather than repeated here.

| Prop | Type | Default | What it does |
| --- | --- | --- | --- |
| `props` | `ButtonTagProps` | — | Attributes for the `<button>` itself — `disabled`, `aria-label`, `form`, `value`. |
| `type` | `ButtonType` | — | `button` unless you say otherwise. Inside a form a `<button>` with no type submits it. |
| `onClick` | `(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void` | — | Fires on a click, and on Enter or Space, which the browser turns into one. |

## Button keyboard

| Key | Result |
| --- | --- |
| `Tab` | Focuses the button; Tab again leaves it. |
| `Enter / Space` | Activates it. The browser fires a real click, so `onClick` is all a button needs to be operable from the keyboard. |

## Button accessibility

- A native `<button>`, so the role, the tab stop, Enter and Space, and the disabled state are the platform's. What names it is its own text; an icon-only button needs `props={{ 'aria-label': … }}`.
- `disabled` in `props` removes it from the tab order, which also silences it — for a control that has to stay reachable and explain itself, `aria-disabled` with a handler that does nothing.

Swept with axe on every release, in this state: `Button`. No violations, with contrast and landmark rules left to a human. Screen-reader results are not published yet.

## Button style tree

Every part the component draws is a node with a name, so a default can be restyled with `Box.components()` instead of a selector — and a variant is a name too.

`button`variants: secondary, ghost

---

_Every page: https://www.box-kite.dev/llms.txt · every prop, measured: https://www.box-kite.dev/props.md_