Feedback

Loading and status affordances: skeletons shimmer with the motion tokens and fall back to a static fill under reduced motion; progress is a thin blue bar; notices are inline; avatars carry initials.

Skeleton

<div style="display:flex;gap:var(--space-md);align-items:center;flex:1">
	<span class="saga-skeleton saga-skeleton--circle"></span>
	<div style="flex:1">
		<span class="saga-skeleton saga-skeleton--text"></span>
		<span class="saga-skeleton saga-skeleton--text"></span>
		<span class="saga-skeleton saga-skeleton--text"></span>
	</div>
</div>

<span class="saga-skeleton saga-skeleton--block"></span>
<span class="saga-skeleton" style="width:12rem"></span>

Skeleton inside a stat card

<div class="saga-card saga-card--stat" style="min-width:14rem" aria-busy="true">
	<span class="saga-skeleton" style="width:3rem;height:1.5rem"></span>
	<span class="saga-skeleton saga-skeleton--text" style="width:7rem"></span>
	<span class="saga-skeleton saga-skeleton--text" style="width:10rem"></span>
</div>

Progress

Set the fill with the --value custom property; keep the numbers on the element for assistive tech.

<div class="saga-progress" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" aria-label="Upload"><div class="saga-progress__bar" style="--value:35%"></div></div>
<div class="saga-progress saga-progress--lg" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" aria-label="Completion"><div class="saga-progress__bar" style="--value:80%"></div></div>
<div class="saga-progress saga-progress--indeterminate" role="progressbar" aria-label="Working"><div class="saga-progress__bar"></div></div>

Notices

Reports refresh nightly; today's sessions appear tomorrow.

Out of window This session starts before the program's first day.

Your changes were not saved.

Survey launched in 1 session.

<div class="saga-notice" role="status"><span class="saga-notice__icon"><iconify-icon icon="material-symbols-light:info-outline-rounded"></iconify-icon></span><div class="saga-notice__body">Reports refresh nightly; today's sessions appear tomorrow.</div></div>
<div class="saga-notice saga-notice--warning" role="status"><span class="saga-notice__icon"><iconify-icon icon="material-symbols-light:warning-outline-rounded"></iconify-icon></span><div class="saga-notice__body"><span class="saga-notice__title">Out of window</span> This session starts before the program's first day.</div></div>
<div class="saga-notice saga-notice--danger" role="alert"><span class="saga-notice__icon"><iconify-icon icon="material-symbols-light:error-outline-rounded"></iconify-icon></span><div class="saga-notice__body">Your changes were not saved.</div><button class="saga-btn saga-btn--quiet saga-btn--icon saga-btn--sm saga-notice__dismiss" aria-label="Dismiss"><iconify-icon icon="material-symbols-light:close-rounded"></iconify-icon></button></div>
<div class="saga-notice saga-notice--success" role="status"><span class="saga-notice__icon"><iconify-icon icon="material-symbols-light:check-circle-outline-rounded"></iconify-icon></span><div class="saga-notice__body">Survey launched in 1 session.</div></div>

Avatars

ow OW OW TE

ESIRAJ

<span class="saga-avatar saga-avatar--sm">ow</span>
<span class="saga-avatar">OW</span>
<span class="saga-avatar saga-avatar--lg">OW</span>
<span class="saga-avatar saga-avatar--inverse">TE</span>
<span class="saga-avatar" aria-label="Tutor"><iconify-icon icon="material-symbols-light:person-outline-rounded" class="saga-icon saga-icon--lg"></iconify-icon></span>
<span class="saga-avatar-group"><span class="saga-avatar saga-avatar--sm">ES</span><span class="saga-avatar saga-avatar--sm">IR</span><span class="saga-avatar saga-avatar--sm">AJ</span></span>

Icon sizes

<iconify-icon class="saga-icon" icon="material-symbols-light:edit-outline-rounded"></iconify-icon>
<iconify-icon class="saga-icon saga-icon--lg" icon="material-symbols-light:edit-outline-rounded"></iconify-icon>
<iconify-icon class="saga-icon saga-icon--xl" icon="material-symbols-light:edit-outline-rounded"></iconify-icon>