Feedback

How the system talks back — a persistent callout, an ephemeral toast, a zero-data rest state, and a progress stepper.

@shuttering/uiimport { Callout, toast, EmptyState, Stepper, Progress } from '@shuttering/ui'

Callout

An inline, persistent message. Four tones, each pairing color with an icon and a title so meaning never rests on color alone.

Heads up

The neutral ground is shared; only the accent palette swaps.

Deployed

All checks passed and the build is live.

Approaching limit

You’ve used 80% of your quota.

Action needed

Two nodes are unreachable.

Prop	Type	Default	Description
tone	'info' \| 'success' \| 'warning' \| 'danger'	'info'	The semantic tone.
title	ReactNode	—	The bold lead line.
icon	ReactNode	—	An optional leading glyph.

Toast

A transient, imperative notification. Call toast() from anywhere; render one Toaster at the app root. Fire a few: they stack as a deck, expand on hover (which also pauses the auto-dismiss), and each swipes away — flick one sideways to dismiss it.

Prop	Type	Default	Description
toast(message, opts?)	(ReactNode, { tone? }) => void	—	tone is 'success' \| 'error' \| undefined (neutral).
<Toaster />	ToasterProps	—	Mount once at the app root; it renders the deck, expands it on hover, and handles swipe-to-dismiss.

EmptyState

The zero-data rest state — an icon, a title, a line, and an optional action.

Nothing here yet

An icon, a title, a line, and an optional action — the zero-data rest state.

Prop	Type	Default	Description
icon	ReactNode	—	A muted leading glyph.
title (required)	ReactNode	—	The headline.
description	ReactNode	—	A supporting line.
action	ReactNode	—	An optional call to action.

Stepper

A labeled progress indicator for a linear flow.

Start
Details
Review
Done

Prop	Type	Default	Description
steps (required)	{ id: string; label: ReactNode }[]	—	The ordered steps.
current (required)	number	—	The zero-based index of the active step.

Progress

A determinate bar (value 0–100) on an accessible progressbar. The fill carries data-slot="progress-indicator", so a consumer can retint it in place — e.g. a destructive bar once it crosses a threshold.

Prop	Type	Default	Description
value	number	0	Fill percentage, clamped to 0–100.
…props	React.ComponentProps<'div'>	—	Native div attributes — aria-label, className, and the rest.