Button Elements Interactive button components with multiple variants, sizes, colors, and animation options. Use these as building blocks for calls-to-action, form submissions, and navigation.
Colors: Default (Primary) Colored (Secondary) Colored (Tertiary) Colored (Green) Colored (Red) Colored (Blue) Colored (Yellow) Colored (Grey) Colored (White) Colored (Black) Types: Default Type Shadowed Type Inverted Type Texted Type Disabled Type Custom Colored Colored & Shadowed Colored & Inverted Colored & Texted Link Button Span Linked Sized: XXLarge XLarge Large Medium (Default) Small XSmall XXSmall Pill: XXLarge XLarge Large Medium (Default) Small XSmall XXSmall Pill w/ Icon Pill Shadowed Pill Texted Pill & Colored & Icon Icons: Icon Type Icon Type w/ Color Link w/ Icon Icon SLinked w/ Color Animated: Bounce up Bounce down Bounce right Spin
Button Sizing Specs Buttons use body text font sizes with proportional padding.
Size Font Size Padding (v / h) XXS 10px 2px / 11px XS 12px 2px / 14px SM 14px 5px / 18px MD (default) 16px 9px / 26px LG 20px 11px / 34px XL 24px 18px / 44px XXL 28px 22px / 58px
