Skip to content
Signal

Components

Button

Text actions. Default is the Brand-tint secondary; --primary fills with Brand; --ghost is a text link; --sm is the compact size.

Live example

Rendered with the real classes from /site/chitransit.css, light (left) and dark (right).

.ct-button
.ct-button--primary
.ct-button--ghost
.ct-button--sm
[disabled]

Code

<button class="ct-button">Track</button>
<button class="ct-button ct-button--primary">Save</button>
<button class="ct-button ct-button--ghost">Show all</button>
<button class="ct-button ct-button--sm">Export</button>
<button class="ct-button" disabled>Disabled</button>

Tokens

From tokens/components.tokens.json. Override one instance by setting the property without the ct- prefix.

Custom propertyValueAlias
--ct-button-backgroundvar(--accent-tint){colors.accentTint}
--ct-button-background-primaryvar(--accent){colors.accent}
--ct-button-colorvar(--accent){colors.accent}
--ct-button-color-disabledvar(--inactive){colors.inactive}
--ct-button-color-primaryvar(--accent-ink){colors.accentInk}
--ct-button-font-sizevar(--fs-body){type.body}
--ct-button-font-size-smvar(--fs-sub){type.sub}
--ct-button-font-weightvar(--weight-semibold){weight.semibold}
--ct-button-gapvar(--space-8){space.s8}
--ct-button-heightvar(--size-minimum-tap-target){size.minimumTapTarget}
--ct-button-height-sm36px
--ct-button-icon-size18px
--ct-button-padding-x18px
--ct-button-padding-x-smvar(--space-12){space.s12}
--ct-button-radiusvar(--r-card){radius.card}

Usage

Do

  • Use one --primary button per surface, for its main action.
  • Use --ghost for low-emphasis actions such as “Show all”.
  • Write the label as a verb: “Save”, “Track”, “Export”.

Don't

  • Don't put two primary buttons side by side.
  • Don't use a button for navigation; use a link.

Accessibility

  • Use a real <button>; disable with the disabled attribute, not a class.
  • Every button keeps a 44 × 44 hit area whatever its visual size.
  • Focus shows the Brand focus ring from :focus-visible.