> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# Sonner

> Sonner is a toast notification that appears at the bottom of the screen and auto-dismisses after a few seconds.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-sonner-toast--docs)

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--default" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--default&viewMode=story&globals=theme:light" title="Sonner default story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

## When to use

* To provide timely feedback for user-triggered actions (e.g., "Item deleted.").
* For non-critical updates that don't require immediate attention (e.g., "2 new messages.").
* To confirm or acknowledge system or app processes (e.g., "Downloading file…").
* When you need a lightweight, non-disruptive notification that doesn't block user progress.
* To display multiple messages in sequence without breaking the user flow.

## When to use something else

* Urgent, blocking issues: use [Dialog](/cdf/aura/primitives/dialog), [Alert dialog](/cdf/aura/primitives/alert-dialog), or [Banner](/cdf/aura/primitives/banner).
* Long or detailed content, or must-stay-visible feedback: use inline validation, [Alert](/cdf/aura/primitives/alert), or dedicated error regions—not a toast.
* Persistent system-level messaging: prefer [Banner](/cdf/aura/primitives/banner); task-scoped feedback: prefer [Alert](/cdf/aura/primitives/alert).

## Dos and don'ts

* **Do** keep messages short and clear (1-2 lines max).
* **Do** use appropriate semantic status color and iconography to convey status (e.g., success = green, warning = yellow).
* **Do** provide an "Undo" or "Retry" action if possible.
* **Don't** show vague or generic messages (e.g., "Done" or "Failed").
* **Don't** display more than one Sonner at a time.

## Behavior

There is a priority-based queue and duration of display time depending on the feedback type. The counter ensures that more critical Sonners stay on the screen for a longer period of time, giving the user more chance to read and act on them. Sonners have a minimum display time of 4 seconds.

| Priority | Type     | Display time | Implication                                            |
| :------- | :------- | :----------- | :----------------------------------------------------- |
| 1        | Critical | 8 seconds    | The most important and urgent feedback.                |
| 2        | Warning  | 6 seconds    | A warning that requires attention but is not critical. |
| 3        | Success  | 4 seconds    | A successful action or result.                         |
| 4        | Neutral  | 4 seconds    | A neutral message or information.                      |

Dismissal:
Auto-dismiss: Sonners automatically disappear after their display time (see table above).
Manual dismiss (optional): You can include a close Button for user control, especially for longer or persistent messages.

## Often used with

Optional action control (e.g. Undo) styled as a [Button](/cdf/aura/primitives/button); status icon; does not include full [Alert](/cdf/aura/primitives/alert) copy blocks.

## Visual examples

The examples below are interactive and follow the doc site's theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

### With description

Add a description when the toast message needs a brief supporting detail—for example, explaining what was saved or what happens next after an action.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--with-description" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--with-description&viewMode=story&globals=theme:light" title="Sonner with description story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Success

Use a success toast to confirm a completed action—for example, "Item saved" or "Changes published"—so users know the operation finished without blocking their workflow.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--success" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--success&viewMode=story&globals=theme:light" title="Sonner success story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Error state

Use an error toast for non-blocking failures—for example, a network timeout or validation issue where the user can retry without leaving the current page.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--error-state" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--error-state&viewMode=story&globals=theme:light" title="Sonner error state story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Warning

Use a warning toast when something needs attention but does not block progress—for example, a partial save or a setting that may have unintended side effects.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--warning" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--warning&viewMode=story&globals=theme:light" title="Sonner warning story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Info

Use an info toast for neutral updates that do not indicate success or failure—for example, background sync status or informational notices about app behavior.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--info" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--info&viewMode=story&globals=theme:light" title="Sonner info story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With action

Add an action button when users may want to undo, retry, or navigate to related content—for example, "Undo" after deleting an item or "View" after a background task completes.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--with-action" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--with-action&viewMode=story&globals=theme:light" title="Sonner with action story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Long title with action

Use a longer title with an action when the message needs more context but should still stay concise—keep copy to one or two lines and place the action on the right.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--long-title-with-action" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--long-title-with-action&viewMode=story&globals=theme:light" title="Sonner long title with action story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Long title warning

Use a longer warning title when the message needs more context, but keep copy brief and actionable so users can read it before the toast auto-dismisses.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--long-title-warning" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--long-title-warning&viewMode=story&globals=theme:light" title="Sonner long title warning story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Title beyond two lines

Avoid titles longer than two lines in production—this example shows how overflow is handled, but keep real messages short for readability and auto-dismiss timing.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--title-beyond-two-lines" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--title-beyond-two-lines&viewMode=story&globals=theme:light" title="Sonner title beyond two lines story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With cancel button

Add a cancel button when the toast represents an in-progress action users may want to stop—for example, cancelling an upload or a background sync.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--with-cancel-button" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--with-cancel-button&viewMode=story&globals=theme:light" title="Sonner with cancel button story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With close button

Add a close button when users should be able to dismiss the toast before it auto-dismisses—for example, longer messages or toasts that stay visible longer.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--with-close-button" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--with-close-button&viewMode=story&globals=theme:light" title="Sonner with close button story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Action and close button

Combine an action and close button when users need both a quick follow-up and manual dismiss—for example, "Undo" alongside the option to close without acting.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--action-and-close-button" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--action-and-close-button&viewMode=story&globals=theme:light" title="Sonner action and close button story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Icon visibility by description

Icon visibility adjusts based on whether a description is present—use descriptions when the status needs clarification beyond what the icon alone conveys.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-sonner-toast--icon-visibility-by-description" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-sonner-toast--icon-visibility-by-description&viewMode=story&globals=theme:light" title="Sonner icon visibility by description story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>