Amelise SquadV1.0 Dark Bloom Edition

BUTTON COMPONENT

VARIANTS · SIZES · STATES · ACCESSIBILITY // 2026

Components / Buttons6 Variants · 8 Sizes2026
01VARIANTS2026
Button Variants
defaultvariant="default"
secondaryvariant="secondary"
destructivevariant="destructive"
outlinevariant="outline"
ghostvariant="ghost"
linkvariant="link"
02SIZES2026
Button Sizes
Size
Preview
Usage
Icon Variant
size="xs"
Inline actions, compact UI
size="sm"
Secondary actions, dialogs
size="default"
Standard buttons (default)
size="lg"
Primary CTAs, hero sections
size="icon-xs"
Tiny icon buttons
size="icon-sm"
Small icon buttons
size="icon"
Standard icon buttons
size="icon-lg"
Large icon buttons, FABs
03AS CHILD (COMPOSITION)2026
asChild Prop — Render Polymorphism

Button as Link

Renders as <a> with button styles

Go to Page

Button as Custom Component

Passes props to any component

Custom Element
04ACCESSIBILITY2026
Accessibility Features

Focus Visible

3px ring with brand color on focus

Disabled State

50% opacity, pointer-events-none

ARIA Support

aria-invalid for error states

Keyboard Nav

Tab, Enter, Space support

Contrast Ratio

WCAG AA compliant text contrast

Touch Target

Min 36px touch area on mobile