PettyUI/.firecrawl/kobalte.dev-docs-core-components-button.md

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 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 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←BreadcrumbsNextCheckbox→