Components

Toast

A transient, floating notification: a bordered surface card with a 3px status bar on the left — like an alert, but it sits on its own surface and stacks in a fixed top-right viewport. In React, a ToastProvider + useToast() hook handle queueing and auto-dismiss.

Card

A single toast on its own (the fixed .ds-toasts viewport is omitted here so it renders in flow). A title, a softer message line, and the borderless × dismiss.

.ds-toast

Saved

Your pricing matrix has been published.

<div class="ds-toast ds-toast--success" role="status">
  <div class="ds-toast__content">
    <div class="ds-toast__title">Saved</div>
    <div class="ds-toast__message">Your pricing matrix has been published.</div>
  </div>
  <button class="ds-toast__close" type="button" aria-label="Dismiss">×</button>
</div>

Stacked variants

The .ds-toasts container stacks cards with a gap; status modifiers recolor each left bar. Shown here in flow (its position: fixed is overridden for the demo).

.ds-toasts

Synced

Rates refreshed from the server.

Heads up

3 rates are missing a currency.

Export failed

The server returned a 500.

<div class="ds-toasts">
  <div class="ds-toast ds-toast--info" role="status">…</div>
  <div class="ds-toast ds-toast--warning" role="alert">…</div>
  <div class="ds-toast ds-toast--danger" role="alert">…</div>
</div>

React

Wrap the app in a ToastProvider (it portals a fixed viewport to <body>), then call show() from the useToast() hook. Toasts auto-dismiss after duration (default 4000ms).

ToastProvider · useToast

import { ToastProvider, useToast } from "@diametral/design-system/react";

function App() {
  return (
    <ToastProvider>
      <Toolbar />
    </ToastProvider>
  );
}

function Toolbar() {
  const { show } = useToast();
  return (
    <button
      className="ds-button"
      onClick={() => show({
        type: "success",
        title: "Saved",
        message: "Your pricing matrix has been published.",
        duration: 4000,
      })}
    >
      Publish
    </button>
  );
}