Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Toast

Transient feedback for completed actions, errors and recoverable background work.

CoreOverlays & Menus@gaudi/design-system/core/ToastView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Toast from '@gaudi/design-system/core/Toast';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/toast-actions.json.

Usage

import ToastProvider, { toast } from '@gaudi/design-system/core/Toast';import Button from '@gaudi/design-system/core/Button';
<><ToastProvider /><Button onClick={() => toast.success('Changes saved')}>Save</Button></>

Examples

Actions

Storybook

Progress and async work

Storybook

Custom content

Storybook

Types and options

Storybook

API

7 props

Accessibility

Use inline errors for fields and persistent failures. Keep toast actions keyboard accessible and allow enough time to act.

Notes

  • Mount one ToastProvider for a region. The toast API and additional provider props are forwarded from Sonner.
AvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesFieldField composes form label, description, error, and input building blocks.7 examplesSwitchSwitch renders a token-styled boolean preference control.4 examplesSelectSelect renders a styled option picker with searchable combobox behavior and multi-select support.20 examplesToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examplesProgressDeterminate and indeterminate progress with a readable task label.4 examples