Button

Installation

npx bambiui init
npx bambiui add button

The CLI copies self-contained Button source into your project. The installed output includes framework source, recipe.ts, types.ts, and button.css.

Import global tokens once:

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

Imports

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';
---

Basic Usage

React

<Button intent="primary">Save changes</Button>

Svelte

<Button intent="primary">Save changes</Button>

Vue

<Button intent="primary">Save changes</Button>

Astro

<Button intent="primary">Save changes</Button>

Intents

Use intent for semantic meaning. Intent controls the base color tokens.

Intent	Purpose
primary	Main page or form action
secondary	Lower-emphasis action
danger	Destructive action
success	Positive confirmation
warning	Cautionary action

<Button intent="primary">Create</Button>
<Button intent="secondary">Cancel</Button>
<Button intent="danger">Delete</Button>
<Button intent="success">Approve</Button>
<Button intent="warning">Review</Button>

Appearances

Use appearance for visual treatment without changing the semantic intent.

Appearance	Behavior
solid	Filled button, default for primary actions
outline	Transparent background with border
ghost	Minimal button for toolbars or quiet actions
link	Text-link styling while preserving button behavior

<Button appearance="solid">Solid</Button>
<Button appearance="outline">Outline</Button>
<Button appearance="ghost">Ghost</Button>
<Button appearance="link">Link</Button>

Sizes

Size	Use case
sm	Dense UI and compact forms
md	Default size
lg	Prominent actions
icon	Icon-only buttons

Icon-only buttons must have an accessible name:

<Button size="icon" aria-label="Add item">
  <PlusIcon aria-hidden="true" />
</Button>

Loading and Disabled

loading shows the spinner, sets aria-busy, and disables interaction. disabled uses the native disabled state.

<Button loading>Saving</Button>
<Button disabled>Unavailable</Button>

Full Width

Use normal HTML/CSS attributes for layout. React uses className; Svelte, Vue, and Astro use class.

<Button className="w-full">Continue</Button>

.w-full {
  width: 100%;
}

API Reference

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

All other native <button> attributes are forwarded.

Data Attributes

Button styling is driven by stable attributes:

Attribute	Source
data-intent	intent
data-appearance	appearance
data-size	size
data-loading	loading

Accessibility

• The default type is button, preventing accidental form submits.
• Loading buttons set aria-busy and are disabled.
• Icon-only buttons need aria-label or another accessible name.
• Visible focus styles are token-driven through Button and global state tokens.