Component

Toast

Show status feedback banners with tone, message, and optional dismiss action.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Toast } from "@chitrank2050/monoline-ui/toast"

Basic usage

<Toast variant="accent">Document uploaded successfully.</Toast>
<Toast variant="success">Changes saved.</Toast>
<Toast variant="warn">Connection lost. Reconnecting...</Toast>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Toast gives brief, non-blocking feedback and can accept a dismiss action from a client owner.

Avoid when

The message asks for destructive confirmation, must stay on the page, or needs to interrupt immediately.

Accessibility

Toast uses role status and gives its dismiss button a text label. Urgent errors need alert semantics, and dismissal requires a client boundary.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

variantaccent | success | warnVisual state and color dot

onDismiss() => voidCallback showing a dismiss '✕' action button

Design tokens

Theme variables this component reads for color, spacing, and motion.

--accentCSS varAccent status color indicator

Implementation

The source used by the example above, including any state it needs.

import { Toast } from "@chitrank2050/monoline-ui/toast"

export function StatusToast() {
  const dismissToast = () => {
    // Close the toast in your app state.
  }

  return (
    <Toast variant="success" onDismiss={dismissToast}>
      Feature activated!
    </Toast>
  )
}

Compare related components or review the package and theme setup.

01ComponentStatusComponent · ReferenceReference→02ComponentCalloutComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview