Feedback + Loading
The feedback family covers the surfaces that report state to the operator: alerts, badges, loading icons, progress bars, skeleton placeholders, and the toast container. They share the status token surface (Color palette: light tokens.css-token:destructive, Color palette: light tokens.css-token:warning, Color palette: light tokens.css-token:info, Color palette: light tokens.css-token:success) and the popover surface (Color palette: light tokens.css-token:popover, Color palette: light tokens.css-token:popover-foreground, Color palette: light tokens.css-token:border). Status treatments must remain legible as status treatments after a re-skin: destructive, warning, info, success, neutral, and loading must not collapse into one another.
This page is the visual contract the default theme guarantees. Use it as the target spec when you re-skin: every cell shown here should still read as the same surface after a customization, even if its color, radius, or density shifts. If a cell breaks, the change has crossed from skin into design language.
For the mechanics of overriding any of this, see Customize VUEDA Appearance. In brief: values (color, dimension, duration) belong in CSS tokens; compositions (class arrangements, state recipes) belong in theme keys.
Alert: variant matrix
Alert is the canonical boxed status message. The default variant is neutral; destructive, warning, info, and success all use the same recipe: status text, a status hairline at 50%, status background at 10%. The edge is a hairline (inset box-shadow), not a border, so the saturated status colors do not fringe at integer DPR. The icon column collapses when no direct SVG child is present, so consumers never align icon and text manually: the grid template selects between [16px_1fr] and [0_1fr] based on has-[>svg].
Theme keys: Alert, AlertTitle, AlertDescription, AlertActions, AlertClose. Token surface: Color palette: light tokens.css-token:card, Color palette: light tokens.css-token:card-foreground, Color palette: light tokens.css-token:destructive, Color palette: light tokens.css-token:warning, Color palette: light tokens.css-token:info, Color palette: light tokens.css-token:success, and Color palette: light tokens.css-token:border.
Badge: variant matrix
Badge marks system-assigned state inside dense surfaces (FSM labels, workflow states, grids, action strips, menu trailing slots). The body uses Semantic radius tokens.css-token:vueda-control-radius (a 2 px slab), not a pill: pill radii are reserved for user-managed tag and chip objects. The outline variant uses Color palette: light tokens.css-token:foreground text on a transparent fill so it competes less in dense rows. A badge is a status marker by default; only a linked badge (as="a") is interactive, and on hover it shifts its background by one lightness step (the same --*-hover tokens the buttons use), not an alpha fade.
Two families of variant share the component. default, secondary, and destructive are solid: a saturated fill with its own paired foreground token for the label. info, success, and warning are tinted: a 10 % surface, the tone itself as the label colour, and a 50 % tone hairline. The split follows the tokens: the three semantic tones ship no paired foreground token, so a solid fill would have no readable label colour to state. Reach for the solid family for identity and counts, and the tinted family for status a row reports about itself.
A badge presents status the application or server supplied. It is not an authorization signal, and hiding one does not withhold a permission.
Theme key: Badge. Token surface: Color palette: light tokens.css-token:primary, Color palette: light tokens.css-token:secondary, Color palette: light tokens.css-token:destructive, Color palette: light tokens.css-token:info, Color palette: light tokens.css-token:success, Color palette: light tokens.css-token:warning, Color palette: light tokens.css-token:foreground, Color palette: light tokens.css-token:border, and Semantic radius tokens.css-token:vueda-control-radius.
ClickToCopyText
ClickToCopyText pairs a text value with a button that copies it to the clipboard. Use it for machine-readable values a reader will need to paste somewhere else: a request id, a reference number, an API key name, a support ticket code. The value stays selectable text, so the button is a convenience rather than the only way to get at it.
Copying goes through the browser's async Clipboard API, which browsers gate to a secure context. On a page served over plain HTTP, or in a browser that refuses the permission, the copy silently does nothing while the toast still fires; the component does not detect or report that. Both slots are overridable, so a consumer that needs a different affordance can replace the button while keeping the copy handler.
The success toast is raised through the same global toast store as every other toast, so it appears in this page's single Sonner host documented below.
Theme key: ClickToCopyText.
Loading icon: registry controlled
Loading indicators are icon entries, not a shipped spinner primitive. VUEDA renders the configured loading icon through useIcons; the consuming app chooses the icon component and any motion props. In this docs app, the default registry maps Default.loading to a Font Awesome circle-notch icon with Font Awesome's spin prop.
This keeps animation semantics with the integrator's icon system. Font Awesome spins its own SVG; a Lucide-based app can provide a Lucide icon with the classes it expects.
Progress: state matrix
The indicator moves with translateX rather than width to match Reka UI's semantics and keep transitions smooth. The canonical height is 8 px (h-2), with the track at primary/20 and the indicator at primary. The size prop exposes sm (4 px) and lg (12 px) variants for inline-row indicators and prominent task progress. Status tones (success, warning, destructive) swap track and indicator to the matching status surface, mirroring the alert status recipe. Omitting max leaves the bar in Reka's indeterminate state and animates the indicator across the track.
Theme key: Progress. Token surface: Color palette: light tokens.css-token:primary, Color palette: light tokens.css-token:success, Color palette: light tokens.css-token:warning, Color palette: light tokens.css-token:destructive.
Skeleton: composition matrix
Skeleton placeholders claim the same footprint as the content they replace. The fill is primary/10 rather than accent: accent would tint loading states brand-blue and read as selected, while primary/10 stays neutral against the surrounding muted neutrals. Radius and dimensions come from the caller, so card-shaped skeletons override with rounded-vueda-card and avatars override with rounded-full.
Theme key: Skeleton. Token surface: Color palette: light tokens.css-token:primary.
Sonner: variant matrix
Sonner is the toast container. Like Button, it resolves on two axes: type (info, success, warning, error, loading -- the tone) and a surface treatment, normal vs richColors. The normal surface reads against the popover token; richColors reuses Alert's status recipe (status text, a status hairline at 50%, background at 10%, mixed against --popover rather than transparent so the filled surface stays opaque like every other floating overlay) instead of a bold fill, so re-toning stays consistent with Alert's already- established status language. Loading and the default type have no semantic tone to fill, so they only appear on the normal-surface cards. Every toast, normal or rich, carries the same edge and elevation as Popover and HoverCard: an inset hairline (so the saturated rich edges do not fringe at integer DPR) composed with Semantic shadow tokens.css-token:vueda-shadow-popover. The live toasts override vue-sonner's own border and drop shadow to match. Toasts are also dismissible by dragging; a grab cursor and suppressed text selection make that discoverable from the first pointer-down, rather than only once a drag is already underway.
Each row below has a static pair (the intended target, hand-authored) and a live pair (a real Sonner firing real toast() calls, so animation, stacking, drag-dismiss, and timing behave exactly as they do in a consuming app).
Icons come from the check, info, triangleExclamation, close, and loading registry keys via useIcons; override them with setIcons() or per-instance iconOverride. Toasts read against the popover surface, the same one used by Popover and HoverCard, so re-toning the popover token shifts all three in lockstep.
Theme key: Sonner. Token surface: Color palette: light tokens.css-token:popover, Color palette: light tokens.css-token:popover-foreground, Color palette: light tokens.css-token:border, and Semantic radius tokens.css-token:vueda-control-radius.