Button

Buttons with Paper Cut's 4-level elevation system. Default is outlined (Level 2) for most use cases.

Basic Usage

The default button uses outlined (Level 2) - border-only at rest, with a subtle lift + shadow on hover. Suitable for most interactions.

Four levels for different contexts. Choose based on importance and nesting.

Strong shadow with lift animation. For Landing Page CTAs and hero sections. Use cta size for larger buttons.

Medium shadow with lift. For standalone buttons that need presence.

Border-only at rest, lifting to a subtle shadow on hover. The most common variant for general use.

No shadow at rest, minimal styling. Use inside Cards or other elevated containers.

Buttons can include icons on either side.

The key principle: match button elevation to context. Use flat variants inside containers, elevated variants for hero CTAs.

Use elevated + cta size for maximum visual impact on hero sections.

Use flat variants to respect the elevation budget.

Product updates, once a month.

For most cases, the default outlined variant provides clean, functional buttons.

Common mistakes to avoid. Don't use elevated buttons inside elevated containers.

Bad: Elevated inside Card

Good: Flat inside Card

Button component with Paper Cut's 4-level elevation system.

PropTypeDescription

variantSee elevation tableButton style and elevation level

size"sm" | "default" | "lg" | "cta" | "icon-*"Button size

loadingbooleanShow loading spinner

asChildbooleanRender as child element (Slot)

LevelVariantsUse Case

Level 4elevated, elevated-primary, elevated-secondary, elevated-destructiveLanding CTA, hero sections

Level 3default, primary, secondary, destructiveStandalone with presence

Level 2outlined, outlined-*, outlineGeneral use (default)

Level 1flat, flat-*, ghost, linkInside containers