React Components

# Toaster

_**Toaster** component provides a section on the page where you'll be able to display **Toast** to notify the user._

## Overview

---

A **Toast** is a non-blocking notification used to communicate brief messages to the user.

<table class="_table_e3iru_2 _table--md_e3iru_59 _table--striped_e3iru_167 _identity-card__table_75e8e_7" data-ods="table" data-storybook="table"><tbody><tr><th scope="row">Name</th><td>Toaster</td></tr><tr><th scope="row">Also known as</th><td>Notification, Toast</td></tr><tr><th scope="row">Links</th><td><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://www.figma.com/design/9jDDTcR4a9jPRFcdjawAlf/branch/9bnlxD8FSlsM1AkmxZbNLG/ODS---UI-Kit?node-id=11140-2948&amp;p=f&amp;t=Rrmj84Hj95VYn82V-0" target="_blank">Design <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://github.com/ovh/design-system/tree/master/packages/ods-react/src/components/toaster" target="_blank">Github<span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a></td></tr></tbody></table>

## Usage

---

The **Toast** is used for short-lived messages that do not demand immediate user action. They are commonly used for:

-   confirmations (e.g., "Changes saved").
-   warnings or errors (e.g., "Connection lost").
-   informational updates (e.g., "New message received").

### Message vs Toast

**Message**

-   Persistent or semi-persistent information banner.
-   Usually appears inline or at the top of a page as part of the content flow.
-   Designed for status communication (success, warning, critical error, info) that’s tied to a specific screen or context.
-   Remains visible until dismissed or until the state changes.

**Toast**

-   Ephemeral notification that appears for a short time (usually overlay in a corner of the viewport)
-   Designed for lightweight, transient feedback ("Action succeeded", "File uploaded"), except for toast with actions.
-   Auto-dismisses after a few seconds.

### Dos & Don'ts

| ✅ Do |
| --- |
| - Use a Toast to inform users of non-critical system events or confirmations |
| - Keep messages short and clear |
| - Queue multiple Toasts when triggered in quick succession |

| ❌ Don't |
| --- |
| - Use Toasts for critical alerts that require immediate user attention. Use Modal instead |
| - Overuse Toasts for every user action |
| - Allow Toasts to hide critical UI elements |
| - Display long content or actions that require extended attention in a Toast |

### Best Practices in Context

1.  **Toast**
2.  **Icon** - optional
3.  **Close button** - optional
4.  **Content**

## Placement

---

**Toasts** are typically positioned at one of the corners of the viewport (default is top-end), but the placement is configurable to match the application's UX needs.

## Behavior

---

### Auto-dismiss

By default, a **Toast*** is ephemeral and disappears automatically after a predefined duration (default is 3 seconds).

The auto-dismiss timer is paused when the user hovers over the **Toast**, and resumes once the hover ends.

The **Toast** may include a close button, allowing the user to dismiss it before the timer expires.

### Persistent Toast

**Toasts** can be configured to remain visible until the user dismisses them or completes the associated action.

In this case, a close button is always required.

### Manual dismiss

A close button is displayed for manual dismissal.

Manual dismiss is compatible with both auto-dismiss and persistent **Toasts**.

### Stacking

**Toasts** stack within their display area, with a default maximum of 3 visible **Toasts**.

The stack follows a FIFO (First In, First Out) order, the most recent **Toast** appears first.

When a **Toast** is dismissed (automatically or manually), the remaining **Toasts** shift to fill the gap, preserving their relative order.

Stacking direction depends on placement:

-   top placements: the newest **Toast** appears at the top of the stack, pushing older ones downward.
-   bottom placements: the newest **Toast** appears at the bottom of the stack, pushing older ones upward.

## Variation

---

### Color

-   **Information** _(default)_: informing users of specific content, providing global feedback to the user.
-   **Success**: confirming that an action has been completed successfully, providing positive feedback to the user.
-   **Warning**: alerting users to potential issues or cautionary information, prompting them to take preventive actions.
-   **Critical**: highlighting severe and potentially catastrophic issues that demand urgent and decisive action to prevent significant negative consequences.

## Navigation

---

**Toasts** interactive elements can receive keyboard focus.

**Toasts** do not trap focus nor interfere with the active workflow.

## Accessibility

---

The **Toaster** component handles by itself the accessibility requirements.