# Button

Enables users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

## Import

```
Copyts
import { Button } from "@kobalte/core/button";
// or
import { Root } from "@kobalte/core/button";
// or (deprecated)
import { Button } from "@kobalte/core";
```

```
Copyts
import { Button } from "@kobalte/core/button";
// or
import { Root } from "@kobalte/core/button";
// or (deprecated)
import { Button } from "@kobalte/core";
```

## Features

- Native HTML `<button>` element support.
- `<a>` and custom element type support via the [WAI ARIA Button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) design pattern.
- Keyboard event support for `Space` and `Enter` keys.

## Anatomy

The button consists of:

- **Button:** The root container for a button.

```
Copytsx
<Button />
```

```
Copytsx
<Button />
```

## Example

Click me

index.tsxstyle.css

```
Copytsx
import { Button } from "@kobalte/core/button";
import "./style.css";

function App() {
  return <Button class="button">Click me</Button>;
}
```

```
Copytsx
import { Button } from "@kobalte/core/button";
import "./style.css";

function App() {
  return <Button class="button">Click me</Button>;
}
```

## API Reference

### Button

`Button` is equivalent to the `Root` import from `@kobalte/core/button` (and deprecated `Button.Root`).

| Prop | Description |
| --- | --- |
| disabled | `boolean`<br> Whether the button is disabled. |

| Data attribute | Description |
| --- | --- |
| data-disabled | Present when the button is disabled. |

## Rendered elements

| Component | Default rendered element |
| --- | --- |
| `Button` | `button` |

## Accessibility

### Keyboard Interactions

| Key | Description |
| --- | --- |
| `Space` | Activates the button. |
| `Enter` | Activates the button. |

Previous[←Breadcrumbs](https://kobalte.dev/docs/core/components/breadcrumbs)Next[Checkbox→](https://kobalte.dev/docs/core/components/checkbox)