Feedback

Toast

Transient notification surface built on Sonner. Mount one <Toaster /> near the app root, then push notifications anywhere with the imperative toast() API.

Source Sonner

Preview

GitHub

'use client';

import { Button } from '@brika/clay/components/button';
import { toast } from '@brika/clay/components/toast';

/** Trigger a basic notification, mount one Toaster near the app root first. */
export default function ToastDefaultDemo() {
  return (
    <Button
      onClick={() =>
        toast('Changes saved', {
          description: 'Your project was saved successfully.',
        })
      }
    >
      Show toast
    </Button>
  );
}

01 Installation

Install

Pull Toast from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Toast } from "@brika/clay";

tsxGranular1 line

import { Toast } from "@brika/clay/components/toast";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxToast.tsx19 lines

'use client';

import { Button } from '@brika/clay/components/button';
import { toast } from '@brika/clay/components/toast';

/** Trigger a basic notification, mount one Toaster near the app root first. */
export default function ToastDefaultDemo() {
  return (
    <Button
      onClick={() =>
        toast('Changes saved', {
          description: 'Your project was saved successfully.',
        })
      }
    >
      Show toast
    </Button>
  );
}

03 Examples

Toast, every way

Position

Configure Toaster position and display duration at the mount site.

GitHub

'use client';

import { Button } from '@brika/clay/components/button';
import { toast } from '@brika/clay/components/toast';

/** Configure Toaster position and display duration at the mount site. */
export default function ToastPositionDemo() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast.info('Positioned top-center', {
          description: 'Set position on the Toaster component, not per-call.',
        })
      }
    >
      Show info toast
    </Button>
  );
}

Promise

toast.promise tracks an async operation through loading, success, and error states.

GitHub

'use client';

import { Button } from '@brika/clay/components/button';
import { toast } from '@brika/clay/components/toast';
// Counter-driven so the demo alternates between success and failure
// deterministically (every fourth attempt fails). Avoids `Math.random()`
// for predictable demo behaviour.
let uploadAttempt = 0;
function fakeUpload(): Promise<{ filename: string }> {
  return new Promise((resolve, reject) =>
    setTimeout(() => {
      uploadAttempt += 1;
      if (uploadAttempt % 4 === 0) {
        reject(new Error('Network timeout'));
      } else {
        resolve({ filename: 'report-2026.pdf' });
      }
    }, 2000)
  );
}

/** toast.promise tracks an async operation through loading, success, and error states. */
export default function ToastPromiseDemo() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast.promise(fakeUpload(), {
          loading: 'Uploading file…',
          success: (data) => `${data.filename} uploaded successfully`,
          error: 'Upload failed. Check your connection and try again.',
        })
      }
    >
      Upload file
    </Button>
  );
}

Variants

Semantic intent variants and inline action button.

GitHub

'use client';

import { Button } from '@brika/clay/components/button';
import { toast } from '@brika/clay/components/toast';

/** Semantic intent variants and inline action button. */
export default function ToastVariantsDemo() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button
        variant="outline"
        onClick={() =>
          toast.success('Deployment complete', {
            description: 'v2.4.1 is live on production.',
          })
        }
      >
        Success
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast.warning('High memory usage', {
            description: 'Your instance is using 89% of available RAM.',
          })
        }
      >
        Warning
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast.error('Build failed', {
            description: 'TypeScript reported 3 errors in checkout.tsx.',
          })
        }
      >
        Error
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast('Update available', {
            description: 'Version 3.0.0 is ready to install.',
            action: { label: 'Install', onClick: () => undefined },
          })
        }
      >
        With action
      </Button>
    </div>
  );
}

04 Accessibility

Accessibility

Built on Sonner's aria-live region, announcements fire automatically.
Auto-dismiss duration defaults to 4 s; override via toast(msg, { duration }) for critical messages.
Action buttons inside toasts should have descriptive label text.
Respects prefers-reduced-motion, animations are skipped for users with motion sensitivity.

05 Tokens 3 theme-overridable

Theme tokens

Every CSS variable Toast reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Toast without touching component code.

Toast tokens

3 tokens

GeometrySizes, lengths, and corner radii.1

--toast-radiusradiusvar(--radius-container)
components.toast.radius
Toast corner radius.

ElevationDrop shadow and depth.2

--toast-shadowshadowvar(--shadow-spotlight)
components.toast.shadow
Toast elevation.
--toast-backdrop-blurblur0px
components.toast.backdropBlur
Backdrop blur on the toast surface. Set non-zero for a frosted-glass toast.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.toast, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "toast": {
      "radius": "var(--radius-container)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-toast-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Toast. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

No wrapper-specific props, all attributes pass through to the underlying primitive.