Components
Toast
Transient confirmation on the live surface. Add .is-visible (or data-visible) to show it.
Live example
Rendered with the real classes from /site/chitransit.css, light (left) and dark (right).
Saved to Favorites
.ct-toast.is-visibleCode
<div class="ct-demo-toast"><div class="ct-toast is-visible" role="status">Saved to Favorites</div></div>Tokens
From tokens/components.tokens.json. Override one instance by setting the property without the ct- prefix.
| Custom property | Value | Alias |
|---|---|---|
--ct-toast-background | var(--live-bg) | {colors.liveBg} |
--ct-toast-color | var(--live-ink) | {colors.liveInk} |
--ct-toast-duration | var(--motion-live-section-duration) | {motion.liveSectionDuration} |
--ct-toast-font-size | var(--fs-sub) | {type.sub} |
--ct-toast-font-weight | var(--weight-semibold) | {weight.semibold} |
--ct-toast-offset | var(--space-24) | {space.s24} |
--ct-toast-padding-x | var(--space-16) | {space.s16} |
--ct-toast-padding-y | var(--space-10) | {space.s10} |
--ct-toast-radius | var(--radius-pill) | {radius.pill} |
Usage
Do
- Use a toast for a short confirmation on the live surface: “Saved to Favorites”.
Don't
- Don't put actions or long text in a toast; it disappears.
Accessibility
- Give it
role="status"so the message is announced without moving focus.