Alert
Communicates information, confirmation, warning, or error within the current flow.
Design
Functional preview
Running with stable DS HTML and CSS, without a component JavaScript runtime.
Open the HTML/CSS/JS 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.
Implementation
- Status
- Stable
- Distribution
- npm package
Installation
npm install ds-tispnpm add ds-tisyarn add ds-tisbun add ds-tisImports
import 'ds-tis/css'Markup
<div class="ds-alert ds-alert--success ds-alert--subtle" role="status">
<span class="ds-alert__icon" aria-hidden="true"><!-- ícone --></span>
<div class="ds-alert__content">
<strong class="ds-alert__title">Configuração salva</strong>
<p class="ds-alert__description">As preferências já estão disponíveis.</p>
</div>
<button class="ds-alert__close" type="button" aria-label="Fechar alerta">
<!-- ícone de fechar -->
</button>
</div>Web implementation contract
CSS classes
| Class | Description |
|---|---|
ds-alert | Base alert container |
ds-alert--solid | Solid background style; recommended modifier |
ds-alert--filled | Legacy/deprecated: compatibility alias for ds-alert--solid |
ds-alert--subtle | Subtle style with light background and full border (1px) |
ds-alert--success | Success variant (green) |
ds-alert--warning | Warning variant (yellow) |
ds-alert--error | Error variant (red) |
ds-alert--info | Info variant (blue) |
ds-alert__icon | Icon container |
ds-alert__content | Content wrapper for title and description |
ds-alert__title | Alert title (bold) |
ds-alert__description | Alert description text |
ds-alert__actions | Optional container for up to two Small Ghost Buttons |
ds-alert__close | Dismiss/close button |
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 native element semantics, accessible names, keyboard behavior, and visible focus.
Validation evidence
Covered by the stable Storybook, public runtime tests when applicable, keyboard scenarios, responsive checks, and Axe.