Button
Interactive button primitive wrapped in React Aria Components.
The Button primitive is an unstyled, fully accessible interactive button component that supports keyboard navigation, screen reader accessibility, and hover/focus/press states.
Quick Start
Create a styled, accessible interactive button wrapper:
import { Button } from 'boltdocs/primitives'
export default function PrimaryButton() {
return (
<Button
onPress={() => alert('Button Pressed!')}
className="px-4 py-2 bg-primary-500 text-white rounded-lg hover:bg-primary-600 focus:outline-2 focus:outline-primary-500"
>
Click here
</Button>
)
}
Component Props
The Button component accepts all React Aria ButtonProps plus common utility styles:
| Property | Type | Default | Description |
|---|---|---|---|
onPress | (e: PressEvent) => void | undefined | Callback fired when the button is pressed (via click, touch, or keyboard space/enter). |
isDisabled | boolean | false | Disables the button, preventing interactions and setting aria-disabled="true". |
type | 'button' | 'submit' | 'reset' | 'button' | The type of the HTML button element. |
className | string | undefined | Custom utility CSS class overrides. |
style | CSSProperties | undefined | Inline style overrides. |
children | ReactNode | undefined | The label text or graphic elements to render inside the button. |
Customization & states
Button is style-neutral: the primitive ships the structure, the behavior, and the interaction handling, and every visual decision (colors, borders, radius, sizes) belongs to the theme. Because it is a raw RAC.Button, the interaction state is exposed two ways — through the className render function and through data-* attributes that RAC mirrors onto the element — so pressed, hover, and focus styles come from CSS in your theme.
| State / Slot | Mechanism |
|---|---|
className (render function) | Receives { isHovered, isPressed, isFocused, isFocusVisible, isDisabled } for conditional styling |
data-hovered | Present on the button while the pointer hovers it |
data-pressed | Present while the button is being pressed (mouse, touch, or keyboard) |
data-focused / data-focus-visible | Present while focused; data-focus-visible only for keyboard focus |
data-disabled | Present when isDisabled is set |
isDisabled / aria-disabled | Disables interaction; data-disabled and aria-disabled are set for you |
Tailwind v4:
<Button
className="px-4 py-2 rounded-lg text-white bg-primary-500 transition-colors
hover:bg-primary-600 data-pressed:bg-primary-700
data-focus-visible:outline-2 data-focus-visible:outline-primary-500"
>
Click here
</Button>
