# Notification

Small, temporary overlay that appears at the edge of the screen. Use for non-critical confirmations (e.g., "Item saved"). Automatically dismisses after 3–5 seconds.

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.notification.content"
  source="components/dist/registries/dskit.json#notification"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"notification"} activeTab={"content"} />

## Content guidelines

An inline toast is a brief, non-blocking message displayed within a specific area of the page rather than at a global level. It provides feedback directly adjacent to the action or element it refers to.

### When to use

- To confirm a localized action, such as copying a value or saving a field inline.
- To surface a validation warning directly below or beside a specific form field.
- Do not use an inline toast for global events - use the global toast or snackbar instead.

### Style

- One short sentence maximum. Ideally fewer than ten words.
- Use present or past tense to confirm what happened. For example, `Copied` or `Saved`.
- Do not use inline toasts for error messages that require user action - use inline validation instead.

### Examples

| Scenario | Inline toast text |
|---|---|
| Value copied to clipboard | Copied |
| Field saved inline | Saved |
| Tag added to asset | Tag added |
| Link generated | Link created |

### 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.