Buttons

Interactive controls for primary actions, secondary options, and tertiary navigation. Built on a shared seed architecture with consistent token bindings across 4 color themes.

Overview

Button

The Button component has 3 variant axes: Type, Structure, and Size.

PropertyValues
TypePrimary, Secondary, Tertiary
StructureText-only, Text + Icon
SizeLarge (64px), Medium (56px), Small (48px), Extra Small (40px)

Anatomy

← label-wrap (2px optical lift) ← arrow icon ↑ focus-ring (−4px inset)
button-primary — fill
label-primary — text + icon color
border-focus — focus ring stroke

Live Examples

Button Variants

Hover and press to see interactive states. All 4 color themes shown side by side.

Sizes

Four heights on an 8 px ladder: 64 / 56 / 48 / 40. Large, Medium and Small share the label type (16 px); Extra Small (40 px, new 2026-10-22) drops to label-sm (14 px) and is for dense UI such as comparison-table heads and card corners, never for page-level CTAs, where Small is the floor.

Light
Dark
Gray
Colored

Types & Structures

Light
Dark
Gray
Colored

States

Button States

All 5 interactive states for each button type. Tab through the live examples above to see focus rings.

Default
Hover
Pressed
Disabled
Focused
Primary
button-primary
button-primary-hover
button-primary-pressed
button-primary-disabled
border-focus
Secondary
button-secondary
button-secondary-hover
button-secondary-pressed
button-secondary-disabled
border-focus
Tertiary
button-tertiary
button-tertiary-hover
button-tertiary-pressed
button-tertiary-disabled
border-focus

Icons

Button Icons

The trailing icon can change to suit the action. Pick any 16×16 icon from the Icon Library. Icons come in two types: animated icons move on hover to show what the button does, and static icons only change colour with the button. Hover the examples below.

Animated

Primary
Secondary
Tertiary
Motion
Forward arrowCurrent · default
translateX(4px) · 200ms spring
DownloadNew
lift −3px and back · 400ms, once per hover

Static

Primary
Secondary
Tertiary
Motion
CalendarEvents, webinars
none
MailContact actions
none

When to use

TypeUse whenExamples
AnimatedThe icon shows the action or its direction. The motion acts it out: go forward, bring the file down.Forward arrow (default), Download
StaticThe icon labels where the button leads or what it opens. Motion would add nothing.Add to calendar, Contact us, Call sales

Tokens

Button Tokens

Fill Tokens

TokenLightDarkGrayColored
button-primaryOrange50Orange50Orange50AlphaWhite90
button-primary-hoverOrange70Orange70Orange70White
button-primary-pressedOrange60Orange60Orange60AlphaWhite70
button-primary-disabledAlphaBlack20AlphaWhite20AlphaBlack20AlphaWhite20
button-secondaryDeepBlue80DeepBlue10DeepBlue80AlphaBlack80
button-secondary-hoverDeepBlue90WhiteDeepBlue90Black
button-secondary-pressedDeepBlue75DeepBlue15DeepBlue75AlphaBlack70
button-secondary-disabledAlphaBlack20AlphaWhite20AlphaBlack20AlphaWhite20
button-tertiaryTransparentTransparentTransparentTransparent
button-tertiary-hoverAlphaBlack20AlphaWhite20AlphaBlack20AlphaWhite20
button-tertiary-pressedAlphaBlack10AlphaWhite10AlphaBlack10AlphaWhite40

Label Color Tokens

TokenLightDarkGrayColored
label-primaryWhiteWhiteWhiteBlack
label-secondaryWhiteBlackWhiteWhite
label-tertiaryBlackWhiteBlackWhite

Stroke Tokens (Tertiary)

TokenLightDarkGrayColored
button-tertiary-stroke→ button-secondary→ button-secondary→ button-secondary→ button-primary-hover
button-tertiary-stroke-hover→ button-secondary-hover→ button-secondary-hover→ button-secondary-hover→ button-primary-hover
button-tertiary-stroke-pressed→ button-secondary-pressed→ button-secondary-pressed→ button-secondary-pressed→ button-primary-hover
button-tertiary-stroke-disabled→ button-secondary-disabled→ button-secondary-disabled→ button-secondary-disabled→ button-primary-disabled

Focus Ring

TokenLightDarkGrayColored
border-focusTeal50Teal40Teal50White

Specs

Button Specs

Padding — Text + Icon

SizeHeightTopRightBottomLeftGap
Large64px182218288
Medium56px141814248
Small48px101610208

Padding — Text-only (symmetric)

SizeHeightV-padH-pad
Large64px1828
Medium56px1424
Small48px1020

Typography

  • Font: Poppins SemiBold 600
  • Size: 16px
  • Letter-spacing: −0.025em
  • Line-height: 1 (single-line labels only)

Optical Alignment

The .btn__label wrapper adds padding-bottom: 2px for optical vertical centering. For Text+Icon buttons, left padding is 6px larger than right padding at each size to balance the visual weight of the arrow.

Arrow Animation Chain

  • Default: translateX(0)
  • Hover intermediary: quick shift, 50ms linear
  • Hover: translateX(4px) with 150ms ease-out-back cubic-bezier(0.175, 0.885, 0.32, 1.275)
  • Pressed: translateX(3px) — slight pull-back
  • Background fill transitions at 150ms with same easing

Overview

Arrow Button

Icon-only button with arrow. 36 variants from 4 axes: Type, Size, Direction, Shape.

PropertyValues
TypePrimary, Secondary, Tertiary
SizeLarge (64px), Medium (56px), Small (48px)
DirectionForward (→), Back (←)
ShapeSquare (0 radius), Circle (10000px radius)

= 3 × 3 × 2 × 2 = 36 variants. Wraps an Arrow Button Seed (18 variants: 3 Types × 6 States) that handles all interaction states internally.

Live Examples

Arrow Button Variants

Sizes

Types, Shapes & Directions

States

Arrow Button States

Arrow Button Seed has 6 states including a Hover Intermediary that creates the two-step animation chain.

Default
Hover Int.
Hover
Pressed
Disabled
Focused
Primary
opacity → 0
150ms ease-in-out
Secondary
Tertiary

Two-Step Animation Chain

  1. Default → Hover Intermediary: instant — Arrow 1 opacity fades to 0 (disappears)
  2. Hover Intermediary → Hover: after 25ms delay, Arrow 2 slides in from left to centered position — SMART_ANIMATE, Ease in and out, 150ms
  3. Hover → Pressed: instant — Arrow 2 shifts 1px to the left
  4. Hover → Mouse Leave → Default: instant snap back — Arrow 1 reappears, Arrow 2 returns offscreen

Tokens

Arrow Button Tokens

Arrow Button shares the same fill, label, and stroke tokens as Button — they both derive from the shared seed architecture. See the Button token table above for the complete reference.

Specs

Arrow Button Specs

Padding (symmetric)

SizeDimensionsPaddingIcon
Large64 × 6424px all16 × 16
Medium56 × 5620px all16 × 16
Small48 × 4816px all16 × 16

Direction

Back direction is achieved with scaleX(-1) on the icon wrapper, flipping the arrow horizontally. The transform is applied to the seed instance, not individual vector children.

Shape

Square uses border-radius: 0. Circle uses border-radius: 10000px (effectively a pill/circle at any size).

Overview

Play Button

Circle play button for video thumbnails. Two types (Primary = Orange50, Secondary = DeepBlue80), four sizes. The play triangle is always white and optically centered within the circle.

SizeDiameterIconOptical offsetClass
Extra Large96px64px+5px rightplay-btn--xl
Large64px42.67px+4px rightplay-btn--lg
Medium48px32px+3px rightplay-btn--md
Small24px16px+2px rightplay-btn--sm

Anatomy

Play Button Anatomy

← Orange50 fill (Primary type) ← white play icon (+5px optical offset) ↑ focus-ring (outline)
btn-primary — Primary fill
btn-secondary — Secondary fill
#FFFFFF — icon (always white)
border-focus — focus ring

Live Examples

Play Button Variants

Hover and click to see interactive states. Both types shown at all 4 sizes.

Primary — all sizes

Light
Dark

Secondary — all sizes

Light
Dark

States — Extra Large (Primary / Secondary)

Primary
Default
#FA4616
Hover
#FA4616 · 100%
Pressed
#C2320C · 100%
Secondary
Default
#293940
Hover
#293940 · 100%
Pressed
#172125 · 100%

Tokens

Play Button Tokens

TypeStateTokenValue
PrimaryDefaultbtn-primary#FA4616 · 60% opacity
PrimaryHoverbtn-primary#FA4616 · 100% opacity (reveals solid)
PrimaryPressedbtn-primary-hover#C2320C · 100% opacity
SecondaryDefaultbtn-secondary#293940 · 60% opacity
SecondaryHoverbtn-secondary#293940 · 100% opacity
SecondaryPressedbtn-secondary-hover#172125 · 100% opacity
BothAll states—#FFFFFF icon · always 100% opacity
BothAll states—backdrop-filter: blur(30px)

Specs

Play Button Specs

SizeDiameterIcon (CSS)Optical offset
Extra Large96px64pxmargin-left: 5px
Large64px42.67pxmargin-left: 4px
Medium48px32pxmargin-left: 3px
Small24px16pxmargin-left: 2px

Optical Centering

The play triangle's geometric centroid sits left of center — the left edge (base) is wider than the right tip. Icon is offset right by a small fixed amount per size so it appears visually centered in the circle.

SVG

Single viewBox="0 0 64 64" path for all sizes. CSS width/height on the icon controls rendered size. No separate path per size.

Transparency + Backdrop Blur

Default state is 60% opacity with backdrop-filter: blur(30px) — the circle is semi-transparent and blurs whatever is behind it (e.g. the video thumbnail). On hover, opacity goes to 100% (same color, just solid). On press, color darkens and stays at 100%. The icon SVG is a separate layer at full opacity — it's never dimmed by the button's opacity.

No Shadow

No box-shadow. The frosted fill provides sufficient contrast against the video overlay.

Accessibility

ARIA & Keyboard

ARIA Attributes

ElementAttributeValue
All buttonsroleImplicit from <button> — never use <div> or <span>
Link-styled buttonsrole="link"Only if a <button> is visually styled as a link
Disabled buttonsdisabled + aria-disabled="true"Both attributes required — disabled removes from tab order, aria-disabled announces state
Icon-only buttons (Arrow Button)aria-labelDescriptive label (e.g. "Next", "Previous") — CSS-masked icons are invisible to screen readers
Text + icon buttonsaria-hidden="true"On the arrow icon element — the label already describes the action

Focus

StateStyle
:focus-visibleoutline: 2px solid Teal50 (#0BA2B3); outline-offset: 2px
:focus:not(:focus-visible)No outline — mouse clicks don't show the ring
DisabledNot focusable — removed from tab order by disabled attribute

Keyboard Interaction

KeyAction
TabMoves focus to the next interactive element
Enter / SpaceActivates the button (native <button> behavior)