Actions

Button

A familiar native button for one immediate action.

When to use it: Use it to save, delete, open, or submit—not to change pages.

On this page

Example
Anatomy
Step by step
Keyboard
Forms and accessibility
API reference

Example

Button.tsxtsx

import { useState } from "react";
import { Button } from "@comp0/react";

export function Example() {
  const [saved, setSaved] = useState(false);

  return (
    <Button
      className="rounded bg-teal-700 px-3 py-2.5 text-base text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-600 sm:py-2 sm:text-sm dark:bg-teal-400 dark:text-zinc-950"
      onClick={() => setSaved(true)}
    >
      {saved ? "Saved" : "Save changes"}
    </Button>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

Button
Native button and press target. Owns a DOM element.

Step by step

1
Add the main part
Put Button where the action happens.
2
Add the supporting parts
Write a short verb such as Save.
3
Make the behavior clear
Connect onClick, or use type="submit" in a form.
Exampletsx
```
<Button onClick={save}>Save</Button>
```

Keyboard

↵: Presses the focused button.
Space: Presses the focused button.

Forms and accessibility

A native Button submits a form when type="submit".

Accessibility checklist

Use a visible verb that describes the action.
Keep a visible focus ring.
Use Link instead when the action changes the URL.

API reference

Importtsx

import { Button } from "@comp0/react";

`Button`

DOM element

Native button and press target.

Prop	Type	Description
`onClick`	`(event: MouseEvent) => void`	Runs the action on press.
`type`	`"button" \| "submit" \| "reset"`	Native button type; defaults to "button".
`disabled`	`boolean`	Disables the button; pending also disables it.
`pending`	`boolean`	Marks a busy action: disables the button and sets aria-busy.
`as`	`ElementType`	Renders another element with button semantics restored.

Style hooks

Attributes that appear while a state is true. Target them with Tailwind data variants such as data-open:bg-zinc-100, or with any CSS selector.

[data-disabled] on Button: The button is disabled.