Form

Button

Accessible push button with six visual variants, three sizes, loading state and a headless (unstyled) mode for Tailwind.

Import

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

Examples

Variants

Six built-in variants cover most actions.

<Button variant="solid">Solid</Button>
<Button variant="soft">Soft</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="danger">Danger</Button>

Sizes

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

Loading state

`loading` disables the button and announces aria-busy.

<Button loading>Saving…</Button>

API

Button props

Prop	Type	Default	Description
`variant`	`"solid" \| "soft" \| "outline" \| "ghost" \| "link" \| "danger"`	`"solid"`	Visual style of the button.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Control height and typography scale.
`loading`	`boolean`	`false`	Shows a spinner, sets aria-busy and disables interaction.
`fullWidth`	`boolean`	`false`	Stretches the button to the container width.
`startIcon / endIcon`	`ReactNode`	—	Icons rendered before/after the label.
`unstyled`	`boolean`	`false`	Headless mode — drops Zephora classes so Tailwind or custom CSS can style it.
`…rest`	`ButtonHTMLAttributes<HTMLButtonElement>`	—	All native button props (onClick, disabled, type…) are forwarded.

Keyboard

Key	Action
`Enter / Space`	Activates the button.
`Tab`	Moves focus.