Components · Feedback
Alert
BetaA message that stays on the page, such as a failed payout.
- Source
components/ui/alert.tsx - shadcn/ui Alert
- Figma: not linked yet (Q13)
Your last payout failed
The bank rejected the IBAN on file. Update it to receive SAR 3,450.
When to use
- For a message that stays on the page until the problem is solved or the coach dismisses it: a failed payout, missing bank details, a plan limit.
- For context at the top of a page or section: what changed, what to check.
When not to use
- To confirm something that just happened ("Workout saved"): use a Toast.
- For a field error: show it under the field.
- For a status in a list: use a Badge.
Anatomy
Invoice due in 3 days
Lina's package renews on 24 Oct.
- 1. Container with an icon at the start: border and fill from the variant
- 2. Title: what happened, in one line
- 3. Description: why it matters and what to do, with an optional action
Variants
Programs now repeat automatically
When a block ends, clients start the next week without waiting for you.
Tabby is connected
Clients can now split payments into 4.
4 clients haven't checked in this week
Send a reminder before Friday.
Prices show in USD outside Saudi Arabia
Meal plan drafted by AI
Review the portions before you send it to Lina.
| Variant | Use for |
|---|---|
default | Neutral information and product news |
success | Something finished that the coach set up and should know about |
warning | Something needs attention soon |
destructive | Something failed or is blocked |
info | A fact that explains what the coach sees |
ai | Content created by AI that the coach should review |
success, warning, info and ai are SuperCoach extensions (SPEC §6), using subtle fills with status text (QUESTIONS Q2).
States
Alerts are static. An action inside an alert is a regular Button with its own states.
Usage guidelines
- One alert per region. If there are several problems, list them in one alert.
- Put the alert where the problem is: a payout alert on the payouts page, not on the dashboard.
- Give every destructive and warning alert a way forward: an action or a clear next step.
Content guidelines
- Title: what happened, in plain words. "Your last payout failed", not "Error 402".
- Description: the reason and the fix, with numbers where they help: "Update it to receive SAR 3,450."
- Action labels are verbs: "Update bank details".
Accessibility
role="alert"(the default) interrupts a screen reader immediately. Use it only for urgent problems that appear while the coach works. For everything else, passrole="status", which waits for a pause, or no role at all for alerts present on page load.- The icon is decorative; the title says what kind of alert it is.
- All variants pass 4.5:1 in both themes.
RTL
The icon sits in the first grid column, at the start, so it moves to the right. Text aligns to the start.
Tokens used
Read from components/ui/alert.tsx at build time, so this list changes when the component does. Opacity modifiers such as /90 are shadcn hover and focus tints on top of the token.
| Token | Utilities | SuperCoach | Coach |
|---|---|---|---|
| --ai | border-ai | violet-ai-500 | violet-ai-500 |
| --ai-foreground | text-ai-foreground | violet-ai-700 | violet-ai-700 |
| --card | bg-card | white | white |
| --card-foreground | text-card-foreground | neutral-950 | neutral-950 |
| --destructive-text | text-destructive-text | red-700 | red-700 |
| --info | border-info text-info | blue-700 | blue-700 |
| --info-subtle | bg-info-subtle | blue-50 | blue-50 |
| --muted-foreground | text-muted-foreground | neutral-600 | neutral-600 |
| --success | border-success | green-600 | green-600 |
| --success-subtle | bg-success-subtle | green-50 | green-50 |
| --success-text | text-success-text | green-700 | green-700 |
| --warning | border-warning | amber-500 | amber-500 |
| --warning-subtle | bg-warning-subtle | amber-50 | amber-50 |
| --warning-text | text-warning-text | amber-800 | amber-800 |
- Radius
rounded-lg - Type
font-medium - Type
leading-normal - Type
text-sm - Type
tracking-tight
Props
<Alert>
Also takes every prop of <div>
| Prop | Type | Default |
|---|---|---|
| variant | "default" | "destructive" | "success" | "warning" | "info" | "ai" | "default" |
<AlertTitle>
Also takes every prop of <div>
No props of its own.
<AlertDescription>
Also takes every prop of <div>
No props of its own.
Replaces in coach-admin
From the read-only audit of coach-admin: 114 style values, 138 uses.
Classes and selectors
.note8.noteContainer6.info-card__text5.notes-tab__panels .notes-tab__list-panel, .notes-tab__panel5.package-basic-info-card, .package-info-card, .package-free-4.note-editor__direction-full4.info-card__icon-wrapper4.info-card--text4.notes-tab__panels4.note.note--warning3.note.note--success3.info-card--text-title-icon3
Files
src/reusableComponents/InfoCard/InfoCard.scss33src/reusableComponents/note/Note.scss21
The inventory lists the first 12 locations of each value, so file counts are a lower bound.
SCSS variables in these styles
$spacing-smnot a color: spacing, size or layout$spacing-mdnot a color: spacing, size or layout$border-color→--border$spacing-2xsnot a color: spacing, size or layout$spacing-xsnot a color: spacing, size or layout$spacing-xlnot a color: spacing, size or layout$note-overview-rowsnot a color: spacing, size or layout$light-primary-colornot a color: spacing, size or layout$danger-text-color→--destructive-text$success-color→ nearest green-500 (no semantic token)$warning-bg-color→ nearest amber-50 (no semantic token)$warning-color→ nearest amber-600 (no semantic token)