102 lines
1.9 KiB
Markdown
102 lines
1.9 KiB
Markdown
# 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) |