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
ts
import { Button } from "@kobalte/core";
ts
import { Button } from "@kobalte/core";
Features
- Native HTML
<button>
element support. <a>
and custom element type support via the WAI ARIA Button design pattern.- Keyboard event support for Space and Enter keys.
Anatomy
The button consists of:
- Button.Root: The root container for a button.
tsx
<Button.Root />
tsx
<Button.Root />
Example
API Reference
Button.Root
Prop | Description |
---|---|
disabled | boolean Whether the button is disabled. |
Data attribute | Description |
---|---|
data-disabled | Present when the button is disabled. |
Rendered elements
Component | Default rendered element |
---|---|
Button.Root | button |
Accessibility
Keyboard Interactions
Key | Description |
---|---|
Space | Activates the button. |
Enter | Activates the button. |