Button

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

Usage guidelines

• Submit buttons: Unlike the native button element, type="submit" must be specified on Button for it to act as a submit button.
• Links: The Button component enforces button semantics (role="button", keyboard interaction, disabled state). It should not be used for links. See Rendering links as buttons below.

Anatomy

Import the component:

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

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

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

Rendering links as buttons

The Button component enforces button semantics. nativeButton={false} signals that the rendered tag is not a <button>, but it must still be a tag that can receive button semantics (role="button", keyboard interaction handlers). Links (<a>) have their own semantics and should not be rendered as buttons through the render prop.

If a link needs to look like a button visually, style the <a> element directly with CSS rather than using the Button component.

Loading states

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