Button

A styled button component built on Base UI’s Button primitive. Supports multiple visual variants, semantic colors, loading state, and start/end icons.

Import

import { Button } from 'chunks-ui'

Basic Usage

<Button>Click me</Button>

Variants

The variant prop controls the visual style:

<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="text">Text</Button>

Colors

The color prop sets the semantic color:

<Button color="primary">Primary</Button>
<Button color="destructive">Destructive</Button>
<Button color="success">Success</Button>
<Button color="warning">Warning</Button>
<Button color="secondary">Secondary</Button>

Colors work with all variants:

<Button variant="outlined" color="destructive">Delete</Button>
<Button variant="text" color="success">Approve</Button>

Loading State

When loading is true, the button shows a Loader spinner in place of the startIcon and becomes disabled:

<Button loading>Saving...</Button>

The button remains focusable while loading (for accessibility) but click events are suppressed.

Icons

<Button startIcon={<PlusIcon />}>Add Item</Button>
<Button endIcon={<ArrowRightIcon />}>Next</Button>

Icons are hidden during loading state. The startIcon slot is replaced by the Loader.

Props

All other props are forwarded to the underlying Base UI Button.