Skip to main content
Kobalte
ComponentsChangelog

Button

Since v0.1.0@kobalte/core/buttonSourceButton

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

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.
<Button />

Example

import { Button } from "@kobalte/core/button";


export function BasicExample() {
  return <Button class={style.button}>Click me</Button>;
}
.button {
  appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: auto;
  outline: none;
  border-radius: 6px;
  padding: 0 16px;
  background-color: hsl(200 98% 39%);
  color: white;
  font-size: 16px;
  line-height: 0;
  transition: 250ms background-color;
}


.button:hover {
  background-color: hsl(201 96% 32%);
}


.button:focus-visible {
  outline: 2px solid hsl(200 98% 39%);
  outline-offset: 2px;
}


.button:active {
  background-color: hsl(201 90% 27%);
}


[data-theme*="dark"] .button {
  background-color: hsl(201 96% 32%);
  color: hsla(0 100% 100% / 0.9);
}


[data-theme*="dark"] .button:hover {
  background-color: hsl(200 98% 39%);
}


[data-theme*="dark"] .button:active {
  background-color: hsl(199 89% 48%);
}

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.

Last updated: 7/16/26, 7:09 AM