// Feedback

Feedback

Badges, alerts, toasts, tooltips, progress, spinners, skeletons.

Status and feedback components, all pure CSS — no JS for the styling or the animation. Status variants share one vocabulary across badge, alert, and toast: --neutral --success --warning --danger --info.

Badge

PREVIEW
OnlineBuild 0.0.1BetaMIT 
<span class="talos-badge talos-badge--success talos-badge--dot">Online</span>
<span class="talos-badge talos-badge--info">Build 0.0.1</span>

Modifiers: --dot (leading glow dot), --solid (filled), --sm.

Alert

PREVIEW
◆
Deployment queued
Build #482 is waiting on the test gate.
<div class="talos-alert talos-alert--info">
  <span class="talos-alert__icon">◆</span>
  <div class="talos-alert__title">Deployment queued</div>
  <div class="talos-alert__body">Build #482 is waiting on the test gate.</div>
  <button class="talos-alert__close" aria-label="Dismiss">×</button>
</div>

A 3-column grid (icon · title+body · close) with a chamfered corner and a 2px status bar. --bare drops the chamfer for a plain left-border variant.

Toast

Toasts live in a fixed .talos-toast-region (bottom-right); the region is pointer-events: none and each toast re-enables its own. The entrance (slide + fade) is a pure-CSS keyframe — you add/remove the node, CSS does the rest.

PREVIEW
✓
Synced
All replicas consistent.
<div class="talos-toast-region">
  <div class="talos-toast talos-toast--success">
    <span class="talos-toast__icon">✓</span>
    <div class="talos-toast__title">Synced</div>
    <div class="talos-toast__body">All replicas consistent.</div>
    <button class="talos-toast__close" aria-label="Dismiss">×</button>
  </div>
</div>

Tooltip

Pure CSS via a data-tooltip attribute on a .talos-has-tooltip wrapper — the ::after reads the text with attr() and reveals on hover/focus. No JS.

PREVIEW
Hover me 
<span class="talos-has-tooltip" data-tooltip="Cluster region: eu-west-3">
  <span class="talos-badge">Hover me</span>
</span>

Progress

Determinate: set --talos-value (0–100) on the bar. Indeterminate: add --indeterminate to the container and a ::after sweep carries the motion.

PREVIEW 
<div class="talos-progress"><div class="talos-progress__bar" style="--talos-value:68"></div></div>
<div class="talos-progress talos-progress--indeterminate"><div class="talos-progress__bar"></div></div>

Sizes: --sm (4px), --lg (14px).

Spinner & skeleton

PREVIEW 
<span class="talos-spinner"></span>
<span class="talos-skeleton talos-skeleton--text" style="width:90%"></span>

Spinner sizes: --sm --md --lg. Skeleton shapes: --text (stack for paragraphs), --circle. Both animations stop under prefers-reduced-motion.