feedback keys
Source file: client/lib/theme/vueda-tailwind/feedback/index.js
Alerts
| Component | Kind | Slots | Description |
|---|---|---|---|
| Alert | key | 1 | The outer alert surface and layout grid. It owns the optional icon column, card radius, and semantic status recipe, with variant colors flowing into AlertDescription.root. |
| AlertClose | key | 1 | The positioned dismiss affordance for closable alerts. It stays visually quiet until hover or keyboard focus, then uses the shared ring color through the focus-visible outline. |
| AlertTitle | key | 1 | The primary message heading inside the alert grid. It starts in the content column created by Alert.root and clamps to one line so status banners do not grow from long labels. |
| AlertDescription | key | 1 | The supporting message copy beneath the alert title. It inherits variant-specific description tint from Alert.root while keeping nested paragraphs readable for short remediation text. |
| AlertActions | key | 1 | The inline action row for alert follow-up controls. It shares the alert content column with AlertTitle.root and AlertDescription.root, so buttons align under the message instead of under the icon. |
Progress and loading
| Component | Kind | Slots | Description |
|---|---|---|---|
| Progress | key | 2 | The progress track surface and clipping frame. It sets the canonical 8px default height, optional compact or large heights, and status track tints. |
| Skeleton | key | 1 | The loading placeholder block. The primary tint stays neutral enough for rows, cards, and inline placeholders. |
Toasts
| Component | Kind | Slots | Description |
|---|---|---|---|
| Sonner | key | 1 | The toast viewport theme hook passed to vue-sonner. It establishes the toaster group while toast surface, type tint, and icon resolution stay controlled by the wrapper component and Sonner rules. |