Skip to content
Signal

Components

Route toggle

Route filters: a line-colour circle (set --route) or a Brand bus capsule. aria-pressed=true shows the selection ring.

Live example

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

.ct-route-toggle [aria-pressed]
.ct-route-toggle--bus
.ct-route-toggle--dense

Code

<button class="ct-route-toggle" style="--route:var(--red-line)" aria-pressed="true" aria-label="Red Line"></button><button class="ct-route-toggle" style="--route:var(--purple-line)" aria-pressed="false" aria-label="Purple Line"></button>
<button class="ct-route-toggle ct-route-toggle--bus" aria-pressed="true">22</button><button class="ct-route-toggle ct-route-toggle--bus" aria-pressed="false">36</button>
<button class="ct-route-toggle ct-route-toggle--dense" style="--route:var(--brown-line)" aria-pressed="true" aria-label="Brown Line"></button>

Tokens

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

Custom propertyValueAlias
--ct-route-toggle-bus-font-sizevar(--fs-body){type.body}
--ct-route-toggle-bus-font-weightvar(--weight-bold){weight.bold}
--ct-route-toggle-bus-min-width56px
--ct-route-toggle-bus-padding-xvar(--space-14){space.s14}
--ct-route-toggle-bus-radiusvar(--r-control){radius.control}
--ct-route-toggle-durationvar(--motion-control-duration){motion.controlDuration}
--ct-route-toggle-ring-colorvar(--ink){colors.ink}
--ct-route-toggle-ring-gap3px
--ct-route-toggle-ring-gap-colorvar(--paper){colors.paper}
--ct-route-toggle-ring-widthvar(--size-focus-ring-width){size.focusRingWidth}
--ct-route-toggle-size40px
--ct-route-toggle-size-dense34px

Usage

Do

  • Use route toggles for single-select route filters.
  • Set --route to the line token for a train line; use --bus for bus routes.

Don't

  • Don't use a route toggle for anything but a route; line colour means a line.

Accessibility

  • The current toggle carries aria-pressed="true".
  • Give each toggle the line or route name as its accessible name; the colour circle carries no text.