Headless

Button

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

In Nyte

Import

import { Button } from "@nyte-ai/ui/button";

@nyte-ai/ui/button re-exports the Base UI namespace unchanged. There is no Nyte styling on this subpath; the consumer owns every class, StyleX style, and layout decision. Base UI owns the interaction model, keyboard handling, focus management, and ARIA below.

Consumed by:

desktop/src/renderer/src/chrome/sidebar.tsx
desktop/src/renderer/src/components/ui.tsx

The rest of this page is Base UI's documentation for @base-ui/react/button, reproduced verbatim under the MIT license, © Material-UI SAS. Component paths in examples refer to the Base UI package; in Nyte, import from the subpath above.

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:

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

// @highlight-text "nativeButton={false}"
<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 activation, specify focusableWhenDisabled so focus remains on the button while it is disabled. Because some browser and screen reader combinations do not reliably announce changes to a focused button's descendant text, use aria-labelledby to make the changing text the button's explicit accessible name.

API reference

Button

A button component that can be used to trigger actions. Renders a <button> element.

Button Props:

Prop	Type	Default	Description
focusableWhenDisabled	`boolean`	`false`	Whether the button should be focusable when disabled.
nativeButton	`boolean`	`true`	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 (for example, `<div>`).
className	`string \| ((state: Button.State) => string \| undefined)`	-	CSS class applied to the element, or a function that returns a class based on the component's state.
style	`React.CSSProperties \| ((state: Button.State) => React.CSSProperties \| undefined)`	-	Style applied to the element, or a function that returns a style object based on the component's state.
render	`ReactElement \| ((props: HTMLProps, state: Button.State) => ReactElement)`	-	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.

Button Data Attributes:

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

Button.Props

Re-export of Button props.

Button.State

type ButtonState = {
  /** Whether the button should ignore user interaction. */
  disabled: boolean;
};

Canonical Types

Maps Canonical: Alias — Use Canonical when its namespace is already imported; otherwise use Alias.

Button.State: ButtonState
Button.Props: ButtonProps