Button

Use the controls to explore the Button atom's props, variants, and sizes.

Props

The Button supports multiple variants (default, destructive, outline, secondary, ghost, link), sizes (default, sm, lg, xl, xs, icon, icon-sm, icon-lg, icon-xl, icon-xs), states (loading, disabled), and a glass variant with its own styling options.

Variants

Variant	Description
`default`	Primary button with shadow and hover effects.
`destructive`	Red destructive button for delete or dangerous actions.
`destructive-outline`	Outlined destructive button.
`outline`	Standard outlined button.
`secondary`	Secondary button with a lighter background.
`ghost`	Minimal hover-only button.
`link`	Underlined link-style button.
`glass`	Transparent glass effect; accepts `glassVariant`.

Size options

Size	Description
`default`	Standard size with padding.
`sm`	Small size with reduced padding.
`lg`	Large size with increased padding.
`xl`	Extra-large size.
`xs`	Extra-small size.
`icon`	Standard icon-only size.
`icon-sm`, `icon-lg`, `icon-xl`, `icon-xs`	Icon-only sizes matched to the text-button scale.

Special variants

All glass finishes use @samasante/liquid-glass. The material sits inside the interactive element, preserving button sizing, focus, and link rendering. Chrome and Edge refract the live backdrop; Safari and Firefox retain frost, tint, and edge lighting.

Glass variant	Description
`clear`	Light tint with edge lighting.
`frosted`	Blurred background.
`subtle`	Minimal glass effect.
`liquid`	Stronger refraction with a light frost.
`liquid-refract`	Refracting liquid effect; the default.

Usage

This UI module is also available from @exegia/corpora-ui/ui/button.

import { Button } from "@exegia/corpora-ui"

<Button variant="default">Default Button</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="glass">Glass</Button>

API reference

Prop	Type	Default	Description
variant	"default" \| "destructive" \| "destructive-outline" \| "outline" \| "secondary" \| "ghost" \| "link" \| "glass"	"default"	Visual style of the button.
glassVariant	"clear" \| "frosted" \| "subtle" \| "liquid" \| "liquid-refract"	"liquid-refract"	Glass finish. Only accepted when variant is "glass".
sound	boolean	true	Emit cuelume press/release sound attributes. Silent until the app calls bindSounds().
size	"default" \| "sm" \| "lg" \| "xl" \| "xs" \| "icon" \| "icon-sm" \| "icon-lg" \| "icon-xl" \| "icon-xs"	"default"	Size of the button.
loading	boolean	false	Shows a spinner (inline for text sizes, overlaid for icon sizes) and disables the button.