Button

Installation

npx @bambiui/cli init
npx @bambiui/cli add button

Import the token file once from your global stylesheet:

@import './styles/bambi.css';

Then import the component:

React

import { Button } from './components/ui/button';

Svelte

<script>
  import { Button } from './components/ui/button';
</script>

Vue

<script setup>
import { Button } from './components/ui/button';
</script>

Astro

---
import { Button } from './components/ui/button';
---

Intent And Appearance

Primary Secondary Outline Ghost Link Danger Success Warning

React

<Button intent="primary">Primary</Button>
<Button intent="secondary">Secondary</Button>
<Button appearance="outline">Outline</Button>
<Button appearance="ghost">Ghost</Button>
<Button appearance="link">Link</Button>
<Button intent="danger">Danger</Button>
<Button intent="success">Success</Button>
<Button intent="warning">Warning</Button>

Svelte

<Button intent="primary">Primary</Button>
<Button intent="secondary">Secondary</Button>
<Button appearance="outline">Outline</Button>
<Button appearance="ghost">Ghost</Button>
<Button appearance="link">Link</Button>
<Button intent="danger">Danger</Button>
<Button intent="success">Success</Button>
<Button intent="warning">Warning</Button>

Vue

<Button intent="primary">Primary</Button>
<Button intent="secondary">Secondary</Button>
<Button appearance="outline">Outline</Button>
<Button appearance="ghost">Ghost</Button>
<Button appearance="link">Link</Button>
<Button intent="danger">Danger</Button>
<Button intent="success">Success</Button>
<Button intent="warning">Warning</Button>

Astro

<Button intent="primary">Primary</Button>
<Button intent="secondary">Secondary</Button>
<Button appearance="outline">Outline</Button>
<Button appearance="ghost">Ghost</Button>
<Button appearance="link">Link</Button>
<Button intent="danger">Danger</Button>
<Button intent="success">Success</Button>
<Button intent="warning">Warning</Button>

Sizes

Small Medium Large

React

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Svelte

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Vue

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Astro

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Icon

Icon-only buttons. Always provide aria-label for accessibility.

React

<Button size="icon" intent="primary" aria-label="Add">
<PlusIcon />
</Button>
<Button size="icon" intent="secondary" aria-label="Add">
<PlusIcon />
</Button>
<Button size="icon" intent="danger" aria-label="Delete">
<PlusIcon />
</Button>

Svelte

<Button size="icon" intent="primary" aria-label="Add">
<svg>...</svg>
</Button>
<Button size="icon" intent="secondary" aria-label="Add">
<svg>...</svg>
</Button>
<Button size="icon" intent="danger" aria-label="Delete">
<svg>...</svg>
</Button>

Vue

<Button size="icon" intent="primary" aria-label="Add">
<svg>...</svg>
</Button>
<Button size="icon" intent="secondary" aria-label="Add">
<svg>...</svg>
</Button>
<Button size="icon" intent="danger" aria-label="Delete">
<svg>...</svg>
</Button>

Astro

<Button size="icon" intent="primary" aria-label="Add">
<svg>...</svg>
</Button>
<Button size="icon" intent="secondary" aria-label="Add">
<svg>...</svg>
</Button>
<Button size="icon" intent="danger" aria-label="Delete">
<svg>...</svg>
</Button>

With Icon

Add Add Add Add Delete Create Caution

React

<Button intent="primary">
<PlusIcon />
Add
</Button>
<Button intent="danger">
<TrashIcon />
Delete
</Button>

Svelte

<Button intent="primary">
<svg>...</svg>
Add
</Button>
<Button intent="danger">
<svg>...</svg>
Delete
</Button>

Vue

<Button intent="primary">
<svg>...</svg>
Add
</Button>
<Button intent="danger">
<svg>...</svg>
Delete
</Button>

Astro

<Button intent="primary">
<svg>...</svg>
Add
</Button>
<Button intent="danger">
<svg>...</svg>
Delete
</Button>

Rounded

Override --bambi-button-radius to get pill-shaped buttons.

Primary Secondary Outline Ghost Danger Success Warning

React

import './button.css';

<Button className="btn-rounded" intent="primary">Primary</Button>
<Button className="btn-rounded" intent="secondary">Secondary</Button>
<Button className="btn-rounded" appearance="outline">Outline</Button>

/* button.css */
.btn-rounded { --bambi-button-radius: 9999px; }

Svelte

<Button class="btn-rounded" intent="primary">Primary</Button>
<Button class="btn-rounded" intent="secondary">Secondary</Button>
<Button class="btn-rounded" appearance="outline">Outline</Button>

<style>
.btn-rounded { --bambi-button-radius: 9999px; }
</style>

Vue

<Button class="btn-rounded" intent="primary">Primary</Button>
<Button class="btn-rounded" intent="secondary">Secondary</Button>
<Button class="btn-rounded" appearance="outline">Outline</Button>

<style scoped>
.btn-rounded { --bambi-button-radius: 9999px; }
</style>

Astro

<Button class="btn-rounded" intent="primary">Primary</Button>
<Button class="btn-rounded" intent="secondary">Secondary</Button>
<Button class="btn-rounded" appearance="outline">Outline</Button>

<style>
.btn-rounded { --bambi-button-radius: 9999px; }
</style>

Full Width

Full Width Primary Full Width Secondary Full Width Outline

React

<Button style={{ width: '100%' }}>Full Width Primary</Button>
<Button style={{ width: '100%' }} intent="secondary">Full Width Secondary</Button>
<Button style={{ width: '100%' }} appearance="outline">Full Width Outline</Button>

Svelte

<Button style="width: 100%">Full Width Primary</Button>
<Button style="width: 100%" intent="secondary">Full Width Secondary</Button>
<Button style="width: 100%" appearance="outline">Full Width Outline</Button>

Vue

<Button style="width: 100%">Full Width Primary</Button>
<Button style="width: 100%" intent="secondary">Full Width Secondary</Button>
<Button style="width: 100%" appearance="outline">Full Width Outline</Button>

Astro

<Button style="width: 100%">Full Width Primary</Button>
<Button style="width: 100%" intent="secondary">Full Width Secondary</Button>
<Button style="width: 100%" appearance="outline">Full Width Outline</Button>

Loading

Pass loading to show a spinner and block interaction. The button keeps its original width and the label remains accessible to screen readers.

Save Save Save Save Delete Create Caution

React

<Button intent="primary" loading>Save</Button>
<Button intent="secondary" loading>Save</Button>
<Button intent="danger" loading>Delete</Button>

Svelte

<Button intent="primary" loading>Save</Button>
<Button intent="secondary" loading>Save</Button>
<Button intent="danger" loading>Delete</Button>

Vue

<Button intent="primary" :loading="true">Save</Button>
<Button intent="secondary" :loading="true">Save</Button>
<Button intent="danger" :loading="true">Delete</Button>

Astro

<Button intent="primary" loading>Save</Button>
<Button intent="secondary" loading>Save</Button>
<Button intent="danger" loading>Delete</Button>

Disabled

Primary Secondary Outline Ghost Danger Success Warning

React

<Button intent="primary" disabled>Primary</Button>
<Button intent="secondary" disabled>Secondary</Button>
<Button intent="danger" disabled>Danger</Button>

Svelte

<Button intent="primary" disabled>Primary</Button>
<Button intent="secondary" disabled>Secondary</Button>
<Button intent="danger" disabled>Danger</Button>

Vue

<Button intent="primary" disabled>Primary</Button>
<Button intent="secondary" disabled>Secondary</Button>
<Button intent="danger" disabled>Danger</Button>

Astro

<Button intent="primary" disabled>Primary</Button>
<Button intent="secondary" disabled>Secondary</Button>
<Button intent="danger" disabled>Danger</Button>

API Reference

Prop	Type	Default	Description
intent	'primary' | 'secondary' | 'danger' | 'success' | 'warning'	'primary'	Semantic meaning
appearance	'solid' | 'outline' | 'ghost' | 'link'	'solid'	Visual treatment
size	'sm' | 'md' | 'lg' | 'icon'	'md'	Button size
loading	boolean	false	Shows spinner and prevents interaction
disabled	boolean	false	Disables the button
type	'button' | 'submit' | 'reset'	'button'	HTML button type

All other HTML button attributes (aria-*, style, class) are forwarded to the underlying <button> element.