Button

A button component that can be rendered as another tag or focusable when disabled.

import * as React from 'react';
import { Button } from '@base-ui-components/react/button';
import styles from './index.module.css';

export default function ExampleButton() {
  return <Button className={styles.Button}>Submit</Button>;
}

Anatomy

Import the component:

Anatomy

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

<Button />

API reference

focusableWhenDisabled

boolean

false

Name: focusableWhenDisabled
Description: Whether the button should be focusable when disabled.
Type: boolean | undefined
Default: false

nativeButton

boolean

—

Name: nativeButton
Type: boolean | undefined

style

React.CSSProperties | function

—

Name: style
Type: | React.CSSProperties | ((state: Button.State) => CSSProperties | undefined) | undefined

disabled

boolean

—

Name: disabled
Description: Whether the button should ignore user interaction.
Type: boolean | undefined

className

string | function

—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Button.State) => string | undefined)

render

ReactElement | function

—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | ((props: HTMLProps, state: Button.State) => ReactElement)

data-disabled

Present when the button is disabled.

Attribute	Description
`data-disabled`	Present when the button is disabled.

Examples

Rendering as another tag

The button can remain keyboard accessible while being rendered as another tag, such as a <div>, by specifying nativeButton={false}.

Custom tag button

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

<Button render={<div />} nativeButton={false}>
  Button that can contain complex children
</Button>

For buttons that enter a loading state after being clicked, specify the focusableWhenDisabled prop to ensure focus remains on the button when it becomes disabled. This prevents focus from being lost and maintains the tab order.

Button

Anatomy

API reference

Examples

Rendering as another tag

Loading states