Button - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation/button

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

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

Secondary variant button.

Outline variant button.

Ghost variant button.

Button with icon and text.

Icon-only buttons in multiple sizes.

Circle shape button variants.

Button with loading state.

Button size options from small to icon-only.

Saturation extension — not in base shadcn:

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"default"`	The visual style variant of the button.
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "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.

pnpm dlx shadcn@latest add @saturation/button

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

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