Alert
A React source recipe composed with native elements and the public TIS Alert classes and tokens.
Design
Functional preview
Running with the React source recipe distributed through shadcn and based on Base UI.
Open the React · shadcn/Base UI playground
Anatomy
Success
Your changes have been saved.
.ds-alert) — background, border-radius, padding.2 Icon (
.ds-alert__icon) — type-specific Lucide icon, reinforces meaning beyond color.3 Content (
.ds-alert__content) — wrapper for title and description.4 Title (
.ds-alert__title) — bold, 1-3 words.5 Description (
.ds-alert__description) — what happened + what to do.6 Close (
.ds-alert__close) — dismiss button with aria-label="Dismiss alert".
Solid Variants
Success
Your changes have been saved successfully.
Warning
Your session will expire in 5 minutes.
Error
Unable to process your request. Please try again.
Information
A new version is available. Refresh to update.
Subtle Variants
Success
Your profile has been updated.
Warning
Storage is almost full. Consider upgrading your plan.
Error
Payment failed. Please update your billing information.
Information
Maintenance is scheduled for this weekend.
With Close Button
Tip
You can customize your dashboard by dragging and dropping widgets.
Saved
All changes have been saved.
With actions
Actions are optional and compose up to two Small Ghost Buttons inside the Alert content.
Sessão prestes a expirar
Salve o trabalho ou renove a sessão.
Token mapping
Tokens shown for the success variant. Other types (warning, error, info) follow the same pattern with their respective feedback color groups.
| Property | Token | CSS variable |
|---|---|---|
| bg (success solid) | component.alert.bg.success.solid | --ds-alert-bg-success-solid |
| bg (success subtle) | component.alert.bg.success.subtle | --ds-alert-bg-success-subtle |
| border (success subtle) | component.alert.border-color.success.subtle | --ds-alert-border-color-success-subtle |
| text (success solid) | component.alert.description.color.success.solid | --ds-alert-description-color-success-solid |
| text title (subtle) | component.alert.title.color.subtle | --ds-alert-title-color-subtle |
| text description (subtle) | component.alert.description.color.subtle | --ds-alert-description-color-subtle |
| root padding | component.alert.padding.default | --ds-alert-padding-default |
| root gap | component.alert.gap.default | --ds-alert-gap-default |
| root radius | component.alert.radius.default | --ds-alert-radius-default |
| root border-width | component.alert.border-width.default | --ds-alert-border-width-default |
| icon size | component.alert.icon.size.default | --ds-alert-icon-size-default |
| content gap | component.alert.content.gap.default | --ds-alert-content-gap-default |
| title typography | component.alert.title.*.default | --ds-alert-title-*-default |
| description typography | component.alert.description.*.default | --ds-alert-description-*-default |
| close icon size | component.alert.close.icon-size.default | --ds-alert-close-icon-size-default |
| close target size | component.alert.close.size.default | --ds-alert-close-size-default |
| actions layout | component.alert.actions.{gap|padding-top}.default | --ds-alert-actions-* |
| action color | component.alert.action.color.* | --ds-alert-action-color-* |
Usage
When to use
- The message should remain visible next to the related content.
- The communicated state needs context or a directly related action.
When not to use
- Feedback is brief and does not need to remain in the flow; use Toast.
- The person must interrupt the task to decide; use Modal.
React composition
import {
Alert,
AlertContent,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert"
<Alert tone="success" variant="subtle" role="status">
<AlertContent>
<AlertTitle>Configuração salva</AlertTitle>
<AlertDescription>As preferências já estão disponíveis.</AlertDescription>
</AlertContent>
</Alert>Implementation
- Status
- Beta
- Distribution
- Source via shadcn
Installation
Configure the namespace once in the React integration guide.
npx shadcn@latest add @tis/alertpnpm dlx shadcn@latest add @tis/alertyarn dlx shadcn@latest add @tis/alertbunx --bun shadcn@latest add @tis/alertPublic contract
- Registry item
@tis/alert- Provider
- React composition
- Distribution
- Source copied into the application
- Status
- Beta
Accessibility
Keyboard interaction
| Key | Action |
|---|---|
Tab | Moves focus to the close button |
Enter | Activates the close button |
Space | Activates the close button |
Accessibility
| WCAG criterion | Requirement | Status |
|---|---|---|
| 4.1.3 Status Messages (AA) | role="alert" for urgent messages, role="status" for non-urgent | ✓ |
| 1.4.1 Use of Color (A) | Icon + text supplement color — never color alone | ✓ |
| 2.4.11 Focus Appearance (AA) | Close button has visible focus ring | ✓ |
| 4.1.2 Name, Role, Value (A) | Close button has aria-label="Dismiss alert" | ✓ |
role="alert" — for urgent/error messages that should be announced immediately by screen readers.role="status" — for non-urgent informational messages (polite announcement).aria-label="Dismiss alert" — required on the close button.
Output responsibility
Preserve the live-region role by message urgency, keep the icon decorative, and give the optional close button an accessible name.
Validation evidence
Covered by its independent Storybook output plus browser, responsive, keyboard, Axe, and bundle checks.