Alert
A standalone composition component with contextual live-region semantics, public parts, and application-controlled dismissal.
Design
Functional preview
Running with the native Angular component and Live region nativa + composição Angular.
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.
When to choose this output
Choose this native Angular output when the application already uses Angular. It consumes the same DS CSS and has no dependency on the Web runtime or React adapters.
Implementation
- Status
- Beta
- Distribution
- Validated Angular tarball
Installation
npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tispnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tisyarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tisbun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tisDS styles
@import "ds-tis/css";Angular imports
import {
TisAlert,
TisAlertClose,
TisAlertContent,
TisAlertDescription,
TisAlertIcon,
TisAlertTitle,
} from '@tis/angular/alert'Template
<tis-alert tone="success" variant="subtle">
<span tisAlertIcon><!-- ícone decorativo --></span>
<div tisAlertContent>
<strong tisAlertTitle>Configuração salva</strong>
<span tisAlertDescription>As preferências já estão disponíveis.</span>
</div>
<button tisAlertClose aria-label="Fechar alerta" (click)="dismiss()">
<!-- ícone de fechar -->
</button>
</tis-alert>Public contract
- Package
@tis/angular- Entrypoint
@tis/angular/alert- Primitive
Live region nativa + composição Angular- 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 status for contextual messages and alert for urgent errors, 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.