Components

Icon button

Round 44pt glyph buttons (live track, favorite, close). aria-pressed=true fills it.

Live example

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

.ct-icon-button

[aria-pressed="true"]

[disabled]

Code

<button class="ct-icon-button" aria-label="Favorite"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M12 3.2l2.6 5.6 6.1.7-4.5 4.1 1.2 6-5.4-3.1-5.4 3.1 1.2-6L3.3 9.5l6.1-.7z"/></svg></button>
<button class="ct-icon-button" aria-pressed="true" aria-label="Favorite"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M12 3.2l2.6 5.6 6.1.7-4.5 4.1 1.2 6-5.4-3.1-5.4 3.1 1.2-6L3.3 9.5l6.1-.7z"/></svg></button>
<button class="ct-icon-button" disabled aria-label="Favorite"><svg viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M12 3.2l2.6 5.6 6.1.7-4.5 4.1 1.2 6-5.4-3.1-5.4 3.1 1.2-6L3.3 9.5l6.1-.7z"/></svg></button>

Tokens

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

Custom property	Value	Alias
`--ct-icon-button-background`	`var(--accent-tint)`	`{colors.accentTint}`
`--ct-icon-button-background-pressed`	`var(--accent)`	`{colors.accent}`
`--ct-icon-button-color`	`var(--accent)`	`{colors.accent}`
`--ct-icon-button-color-disabled`	`var(--inactive)`	`{colors.inactive}`
`--ct-icon-button-color-pressed`	`var(--accent-ink)`	`{colors.accentInk}`
`--ct-icon-button-glyph-size`	`var(--size-control-glyph)`	`{size.controlGlyph}`
`--ct-icon-button-radius`	`var(--radius-pill)`	`{radius.pill}`
`--ct-icon-button-size`	`var(--size-icon-button)`	`{size.iconButton}`

Usage

Do

Use for round 44pt glyph actions: live tracking, favourite, close.
Show a toggled state with aria-pressed="true".

Don't

Don't ship an icon button without an accessible name.

Accessibility

Give it aria-label; the glyph is aria-hidden.
Toggles use aria-pressed, which also drives the filled style.