# Button (/cloud/headless/button)



{/* Generated by scripts/sync-base-ui-reference.mjs. Edit the script, not this file. */}

## In Nyte [#in-nyte]

```ts title="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 [#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](#rendering-links-as-buttons) below.

## Anatomy [#anatomy]

Import the component:

```jsx title="Anatomy"
import { Button } from '@base-ui/react/button';

<Button />;
```

## Examples [#examples]

### Rendering as another tag [#rendering-as-another-tag]

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

```jsx title="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 [#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 [#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`](https://www.w3.org/TR/accname-1.2/#computation-steps) to make the changing text the button's explicit accessible name.

## API reference [#api-reference]

### Button [#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&#xA;via the `render` prop.&#xA;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&#xA;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&#xA;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&#xA;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 [#buttonprops]

Re-export of [Button](#button) props.

### Button.State [#buttonstate]

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

## Canonical Types [#canonical-types]

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

* `Button.State`: `ButtonState`
* `Button.Props`: `ButtonProps`