useToast — Vortex Design System

"use client";

import { Button, useToast } from "@vortexlabs/vortex";

export const UseToastExample = () => {
  const toast = useToast();

  return (
    <Button
      onClick={() =>
        toast.show({
          title: "Export complete",
          closeAriaLabel: "Dismiss notification",
          description: "Your file is ready.",
          tone: "success",
        })
      }
    >
      Show notification
    </Button>
  );
};

Features

Shows notifications in the closest ToastProvider.
Returns an ID to dismiss each notification.
Works inside VortexProvider without extra setup.

The hook takes no arguments. Use it inside VortexProvider or ToastProvider; outside both, its actions do nothing. Supply closeAriaLabel unless closable is false.

Notification IDs

show returns an ID; pass it to hide to close that notification. timeout: 0 disables automatic dismissal; the close button still works.

"use client";

import { Button, useToast } from "@vortexlabs/vortex";
import React from "react";

export const UseToastIdExample = () => {
  const { show, hide } = useToast();
  const [notificationId, setNotificationId] = React.useState<string | null>(null);

  // Hides the notification when the preview ends or the component unmounts.
  React.useEffect(
    () => () => {
      if (notificationId) hide(notificationId);
    },
    [notificationId, hide],
  );

  return (
    <Button
      onClick={() =>
        setNotificationId(
          notificationId
            ? null
            : show({
                title: "Preview mode is active",
                closeAriaLabel: "Dismiss notification",
                timeout: 0,
              }),
        )
      }
    >
      {notificationId ? "End preview" : "Start preview"}
    </Button>
  );
};

Provider Scope

Inside a nested ToastProvider, useToast sends notifications to that provider's queue.

"use client";

import { Button, Stack, ToastProvider, useToast } from "@vortexlabs/vortex";

const ScopedNotificationButton = () => {
  const toast = useToast();

  return (
    <Button
      variant="secondary"
      onClick={() =>
        toast.show({
          title: "Local preview saved",
          closeAriaLabel: "Dismiss notification",
          position: "bottom-center",
        })
      }
    >
      Notify this preview
    </Button>
  );
};

export const UseToastScopeExample = () => {
  return (
    <Stack
      height="12rem"
      width="100%"
      align="start"
      attributes={{ style: { position: "relative" } }}
    >
      <ToastProvider options={{ "bottom-center": { width: "min(22rem, 100%)" } }}>
        <ScopedNotificationButton />
      </ToastProvider>
    </Stack>
  );
};

See Toast for tones, actions, and positions.