Kobalte.v0.13.1

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/button";
// or
import { Root } from "@kobalte/core/button";
// or (deprecated)
import { Button } from "@kobalte/core";
ts
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.
tsx
<Button />
tsx
<Button />

Example

API Reference

Button

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

PropDescription
disabledboolean
Whether the button is disabled.
Data attributeDescription
data-disabledPresent when the button is disabled.

Rendered elements

ComponentDefault rendered element
Buttonbutton

Accessibility

Keyboard Interactions

KeyDescription
SpaceActivates the button.
EnterActivates the button.