Inline Alert
Inline contextual messages for informing users within content flow. Use to communicate status, errors, warnings, or confirmations without blocking the page.
Here is some helpful information for you.
Your changes have been saved.
Anatomy
Description text here.
- 1 Icon — decorative indicator for the variant
- 2 Content — title and optional description text
- 3 Dismiss button — optional; removes the alert
Options
Variants
A neutral message with no specific status.
Here is some helpful context.
Your action completed successfully.
Something went wrong. Please try again.
Please review the following before proceeding.
Dismissible
You can dismiss this message.
Table of options
| Property | Values | Default |
|---|---|---|
| title | text | — |
| description | text | — |
| variant | default / info / positive / negative / notice | default |
| icon | icon name | variant-appropriate icon |
| dismissible | true / false | false |
Behaviors
Click the × to remove this alert.
Dismiss
When dismissible is true, a close button appears. Clicking it hides the alert by adding the is-hidden class. The Web Component fires a uif-dismiss event.
Title-only mode
The description is optional. When omitted, the title occupies the full content area.
Usage guidelines
Choose the right variant
Your reservation has been saved.
Do
Use positive for confirmed actions or successful outcomes.
Your reservation has been saved.
Don't
Don't use negative for success states — it signals an error.
Content standards
- Keep titles short (3–7 words). Use sentence case.
- Descriptions should be concise, actionable, and in plain language.
- Avoid duplicating title content in the description.
Keyboard interactions
| Key | Action |
|---|---|
| Tab | Moves focus to the dismiss button (when present) |
| Enter / Space | Activates the dismiss button |
Accessibility
- Container uses
role="alert"so assistive technologies announce the message on insertion. - Icons are decorative (
aria-hidden="true"). - The dismiss button has an explicit
aria-label="Dismiss". - Color is not the only means of conveying variant meaning; icons provide a second cue.
Theming
Inline Alert adapts across brands and modes through semantic tokens. Use the hero switches above.
For the full theming architecture see Foundations: Theming.
Component tokens
| Token | Description |
|---|---|
--uif-inline-alert-default-container-background |
Default variant background |
--uif-inline-alert-default-border-color |
Default variant border |
--uif-inline-alert-default-text-color |
Default variant text |
--uif-inline-alert-info-container-background |
Info variant background |
--uif-inline-alert-info-border-color |
Info variant border |
--uif-inline-alert-info-text-color |
Info variant text |
--uif-inline-alert-positive-container-background |
Positive variant background |
--uif-inline-alert-positive-border-color |
Positive variant border |
--uif-inline-alert-positive-text-color |
Positive variant text |
--uif-inline-alert-negative-container-background |
Negative variant background |
--uif-inline-alert-negative-border-color |
Negative variant border |
--uif-inline-alert-negative-text-color |
Negative variant text |
--uif-inline-alert-notice-container-background |
Notice variant background |
--uif-inline-alert-notice-border-color |
Notice variant border |
--uif-inline-alert-notice-text-color |
Notice variant text |
--uif-inline-alert-border-size |
Border width |
--uif-inline-alert-border-radius |
Corner radius |
--uif-inline-alert-padding-inline |
Horizontal padding |
--uif-inline-alert-padding-block |
Vertical padding |
--uif-inline-alert-gap |
Gap between icon and content |