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/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/react/button';

<Button />

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

API reference

focusableWhenDisabledbooleanfalse

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

nativeButtonbooleantrue

Name: nativeButton
Description: Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>).
Type: boolean | undefined
Default: true

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

styleReact.CSSProperties | function—

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

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

Button

Anatomy

Examples

Rendering as another tag

Loading states

API reference