Button

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

Tab Title
Tab Title

<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>

<Button className={styles.button}>
  Styled Button
</Button>

.button {
  padding: 0.5rem 1rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 0.25rem;
}

.button:hover {
  background-color: #2563eb;
}

.button[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

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>
  );
}

Getting Started

Handbook

Inputs

Data Display

Navigation

Overlays

Forms

Layout

Utilities

Import

Basic Usage

Key Features

Key Props

disabled

focusableWhenDisabled

render

Styling

Common Patterns

Primary and Secondary Buttons

Loading State

​Import

​Basic Usage

​Key Features

​Key Props

​disabled

​focusableWhenDisabled

​render

​Styling

​Common Patterns

​Primary and Secondary Buttons

​Loading State

Import

Basic Usage

Key Features

Key Props

disabled

focusableWhenDisabled

render

Styling

Common Patterns

Primary and Secondary Buttons

Loading State