# ✍️ Alert-banner

Static, high-visibility message placed at the top of a page or section. Use for persistent system-level information (Success, Info, Warning, Error) that doesn't disappear automatically.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.alert-banner.content"
  source="components/dist/registries/dskit.json#alert-banner"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"alert-banner"} activeTab={"content"} />

## Content guidelines

Alerts communicate important information that requires the user's attention. They can be informational, confirmatory, cautionary, or indicate an error. Unlike toasts, alerts are persistent and remain visible until dismissed or resolved.

### When to use

- To warn the user of a condition that may affect their work or data - before an action is taken.
- To confirm that a significant action was completed and the user should be aware of the result.
- To surface a system-level error that requires action to resolve.
- Do not use alerts for routine confirmations - use [toast notifications](/components/feedback/notification/) instead.
- Do not stack multiple alerts. Consolidate if possible.

### Style

- Keep alert text to one to two sentences.
- Lead with the most important information.
- Use the appropriate severity: informational, success, warning, or error.
- Include a clear action link or button when the user needs to do something.
- Do not use `Alert:` or `Warning:` as a prefix in the message body - the icon and color convey severity.

### Behavior

- Informational and success alerts can be dismissible.
- Warning and error alerts should persist until the underlying issue is resolved or the user explicitly dismisses them.
- Alerts should appear at the top of the affected area, not in the center of the page.

### Do / Don't

<DoDont pairs={[{ do: "Your connection expired. Log in again to continue.", dont: "Alert: There has been an authentication error. Please log in." }, { do: "Some datasets are read-only. Contact your administrator to request edit access.", dont: "Warning: Permission issue detected." }, { do: "Import failed. Check the file format and try again.", dont: "Error." }]} />

### Inline banner

An inline banner displays a persistent warning, error, or informational message within a page or form. Unlike a global alert, it is scoped to the immediate context.

#### When to use

- To display persistent warnings, errors, or informational messages within a page or form.

#### Style

- State the issue and what the user should do. Keep to one to two sentences.
- Include a link or action if applicable.

### Notification

Notifications inform users of updates, background task completions, or events that require their attention. They appear in the notification panel or dropdown.

#### When to use

- To inform users of updates, background task completions, or events that require their attention.

#### Style

- Use direct, concise language. One to two sentences.
- Include a timestamp.
- Include a link or action if the user must do something in response.
- Do not use generic text like `You have a new notification`.

### Notification toast

Toasts confirm that a background action completed, or surface non-critical errors and warnings that do not block the user.

#### When to use

- To confirm that a background action completed.
- To surface non-critical errors or warnings that do not block the user.
- Do not use toasts for actions that require user input.
- For routine confirmations that need persistence, use an [alert / banner](/components/feedback/alert-banner/) instead.

#### Style

- Keep to one short sentence.
- Include an undo action where relevant.

#### Examples

| Scenario | Toast text |
|---|---|
| Dataset deleted | Dataset deleted. Undo |
| Export complete | Export ready. Download |
| Connection failed | Connection failed. Try again |

### Tooltip

Tooltips provide short contextual help on hover or focus. They are best for icon-only controls that need a label, or for brief supplementary information that does not need to be persistently visible.

#### When to use

- To provide short contextual help on hover or focus.
- For icon-only controls that require a label.
- Do not use tooltips for critical information — users should not be required to hover to understand the UI.

#### Style

- Limit to a few words or one concise sentence.
- Do not repeat the label of the element being described.
- For multi-sentence explanations, use a [popover](/components/overlays/popover/) or inline help text instead.