Skip to main content
A button component that can be used to trigger actions.

​
Import

import { Button } from '@base-ui/react/button';

​
Basic Usage

<Button>Click me</Button>

​
Key Features

  • Accessible button with proper ARIA attributes
  • Supports disabled state
  • Customizable focus behavior when disabled
  • Can be rendered as a native button or custom element

​
Key Props

​
disabled

Type: boolean Default: false Whether the button should ignore user interaction. 
<Button disabled>Disabled Button</Button>

​
focusableWhenDisabled

Type: boolean Default: false Whether the button should be focusable when disabled. 
<Button disabled focusableWhenDisabled>
  Focusable when disabled
</Button>

​
render

Type: (props: ButtonState) => React.ReactElement Custom render function for complete control over rendering. 
<Button render={(props) => <CustomButton {...props} />}>
  Custom Render
</Button>

​
Styling

<Button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed">
  Styled Button
</Button>

​
Common Patterns

​
Primary and Secondary Buttons

function ButtonGroup() {
  return (
    <div className="flex gap-2">
      <Button className="bg-blue-500 text-white px-4 py-2 rounded">
        Primary
      </Button>
      <Button className="bg-gray-300 text-gray-700 px-4 py-2 rounded">
        Secondary
      </Button>
    </div>
  );
}

​
Loading State

function LoadingButton() {
  const [loading, setLoading] = React.useState(false);

  return (
    <Button disabled={loading} onClick={() => setLoading(true)}>
      {loading ? 'Loading...' : 'Submit'}
    </Button>
  );
}