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 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 needsprops={{ 'aria-label': … }}. disabledinpropsremoves it from the tab order, which also silences it — for a control that has to stay reachable and explain itself,aria-disabledwith 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.buttonvariants: secondary, ghost