Toast

Stable
WCAG 2.2 evidence
RTL

Gives the components below it a toast queue through useToast() and renders its ToastRegion. Use it instead of the shared toast queue when toasts belong to one part of the app, or to keep tests and server requests isolated.

import { Toast } from "@nexera-ui/react";

Loading example…

4
examples: 9
props: 1
live controls: 1
platform: 13
WCAG criteria: 0
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

children

Generated code

import { Toast } from "@nexera-ui/react";

<Toast />

Examples 3

The same examples as Storybook, rendered live. Open Code to copy one.

Stack

Three toasts kept open in the real region: bottom edge on narrow screens, bottom end corner from 480 px.

Loading example…

app.tsx

import { useEffect, useState } from "react";
import { ToastRegion, createToastQueue } from "@nexera-ui/react";

interface PresetProps {
  /** Toasts to add when the story mounts, oldest first. */
  readonly toasts: readonly ToastOptions[];
  readonly className?: string;
  readonly closeLabel?: string;
}

function Preset({ toasts, className, closeLabel }: PresetProps) {
  const [initial] = useState(toasts);
  const [queue] = useState(() => createToastQueue({ maxVisibleToasts: initial.length }));
  useEffect(() => {
    for (const options of initial) queue.add(options);
    return () => {
      queue.clear();
    };
  }, [queue, initial]);
  return (
    <ToastRegion
      queue={queue}
      {...(className === undefined ? {} : { className })}
      {...(closeLabel === undefined ? {} : { closeLabel })}
    />
  );
}

export function Stack() {
  return (
    <Preset
      toasts={[
        { title: "Leave request sent", tone: "success", timeout: null },
        {
          title: "Message archived",
          action: { label: "Undo", onAction: () => undefined },
          timeout: null,
        },
        { title: "Uploading payroll", tone: "loading", description: "About 30 seconds left." },
      ]}
    />
  );
}

Long content

Long titles and descriptions wrap inside the 380 px toast (translation adds 30 to 40 %).

Loading example…

app.tsx

import { useEffect, useState } from "react";
import { ToastRegion, createToastQueue } from "@nexera-ui/react";

interface PresetProps {
  /** Toasts to add when the story mounts, oldest first. */
  readonly toasts: readonly ToastOptions[];
  readonly className?: string;
  readonly closeLabel?: string;
}

function Preset({ toasts, className, closeLabel }: PresetProps) {
  const [initial] = useState(toasts);
  const [queue] = useState(() => createToastQueue({ maxVisibleToasts: initial.length }));
  useEffect(() => {
    for (const options of initial) queue.add(options);
    return () => {
      queue.clear();
    };
  }, [queue, initial]);
  return (
    <ToastRegion
      queue={queue}
      {...(className === undefined ? {} : { className })}
      {...(closeLabel === undefined ? {} : { closeLabel })}
    />
  );
}

export function LongContent() {
  return (
    <Preset
      toasts={[
        {
          title: "Your leave request for the whole of next quarter was sent to both managers",
          description:
            "We will email you as soon as both managers have answered. You can still edit or withdraw it.",
          tone: "success",
          timeout: null,
        },
      ]}
    />
  );
}

Right to left

Right-to-left: the stack moves to the bottom left corner and the icon, text and buttons mirror.

Loading example…

app.tsx

import { useEffect, useState } from "react";
import { ToastRegion, createToastQueue } from "@nexera-ui/react";

interface PresetProps {
  /** Toasts to add when the story mounts, oldest first. */
  readonly toasts: readonly ToastOptions[];
  readonly className?: string;
  readonly closeLabel?: string;
}

function Preset({ toasts, className, closeLabel }: PresetProps) {
  const [initial] = useState(toasts);
  const [queue] = useState(() => createToastQueue({ maxVisibleToasts: initial.length }));
  useEffect(() => {
    for (const options of initial) queue.add(options);
    return () => {
      queue.clear();
    };
  }, [queue, initial]);
  return (
    <ToastRegion
      queue={queue}
      {...(className === undefined ? {} : { className })}
      {...(closeLabel === undefined ? {} : { closeLabel })}
    />
  );
}

export function RightToLeft() {
  return (
    <Preset
      closeLabel="إغلاق"
      toasts={[
        {
          title: "تم نسخ الرابط",
          description: "شاركه في أي مكان.",
          tone: "info",
          iconLabel: "معلومة",
          timeout: null,
        },
        {
          title: "تمت أرشفة الرسالة",
          action: { label: "تراجع", onAction: () => undefined },
          timeout: null,
        },
      ]}
    />
  );
}

Props 9

Press "Try it" on a card to load that prop into the playground.

childrenNexera

ReactNode

The app, or the part of it that adds toasts with useToast().

queueNexera

ToastQueue

The queue to show and to return from useToast(). Defaults to a queue of the provider's own (created once).

maxVisibleToastsNexera

number

Toasts shown at the same time when the provider creates its own queue; later ones wait.

closeLabelNexera

string

Accessible name of every toast's close button. Translate it for your locale.

aria-labelNexera

string

Accessible name of the landmark region. Defaults to React Aria's localised count, for example "2 notifications.".

classNameNexera

string

Extra classes for the region, merged last so they win over the defaults (for example another corner).

styleNexera

CSSProperties

Inline style for the region.

aria-labelledbyReact Aria

string

Identifies the element (or elements) that labels the current element.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

8 direct · 5 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.1Use of ColorLevel A · tested directly
1.4.10ReflowLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.2.1Timing AdjustableLevel A · tested directly
2.3.3Animation from InteractionsLevel AAA · supporting test
2.4.3Focus OrderLevel A · tested directly
2.4.7Focus VisibleLevel AA · supporting test
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly
4.1.3Status MessagesLevel AA · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-hovered
data-pressed

Usage

<Toast className="data-hovered:opacity-90 shadow-sm" />

Used in blocks

No block uses Toast yet.

Theme studio

Toast

Try every prop. Copy the code.

Examples 3

Stack

Long content

Right to left

Props 9

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components