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 / 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
