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) XS 10px 2.5px / 20px SM 14px 5px / 25px MD (default) 18px 10px / 35px LG 22px 15px / 45px XL 28px 25px / 60px XXL 32px 30px / 80px