Component
Button
Triggers an action or submits a form.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/buttonExamples
Live previews render through the docs app's PandaCSS codegen.
<Button>Save changes</Button>
<Button variant="outline">Cancel</Button>
<Button variant="ghost" size="sm"> Learn more </Button>
<Button loading>Saving…</Button>
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `asChild` | `boolean` | No | - | - |
| `loading` | `boolean` | No | - | - |
| `loadingLabel` | `string` | No | - | Accessible label announced while \`loading\`. Defaults to \`"Loading"\`. Pass a<br />localized string when the surrounding app supplies translations. |
| `size` | `ButtonSize` | No | - | - |
| `tone` | `ButtonTone` | No | - | - |
| `variant` | `ButtonVariant` | No | - | - |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
| Variant | Values |
|---|---|
| `variant` | `solid`, `outline`, `ghost`, `subtle` |
| `size` | `sm`, `md`, `lg` |
Registry
Files this component contributes to your registry install.
- Manifest: `/r/button.json`
- Recipe: `button`
- Files: `src/components/ui/button.tsx`