Button - Saturation UI

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/button.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). 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.