Button - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/button

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { Button } from "@/components/ui/button"

<Button variant="default">Click me</Button>

Examples

Secondary

Secondary variant button.

Outline

Outline variant button.

Ghost

Ghost variant button.

With Icon

Button with icon and text.

Icon

Icon-only buttons in multiple sizes.

Circle

Circle shape button variants.

Loading

Button with loading state.

Sizes

Button size options from small to icon-only.

Shapes

Saturation extension — not in base shadcn:

default — Standard border radius
pill — Fully rounded
square — No border radius
circle — Perfect circle (use with icon sizes)

API Reference

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"default"`	The visual style variant of the button.
`size`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`	The size of the button.
`shape`	`"default" \| "pill" \| "square" \| "circle"`	`"default"`	The shape of the button. Saturation extension.
`asChild`	`boolean`	`false`	Render as child element via Radix Slot.