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 Icon on leftLink w/ Icon Icon SLinked w/ Color Animated: Bounce up Bounce down Bounce right Bounce leftSpin
Button Sizing Specs Buttons use body text font sizes with proportional padding.
Size Font Size Padding (v / h) XXS 10px 2px / 15px XS 12px 2.5px / 20px SM 14px 6px / 25px MD (default) 16px 12px / 35px LG 20px 15px / 45px XL 24px 25px / 60px XXL 28px 30px / 80px