Skip to component details
EXEPERTAI LAB
ProductCapabilitiesTrustFAQUI GalleryBlogNews
Sign inOpen app ↗
ProductCapabilitiesTrustFAQUI GalleryBlogNewsSign in
← Browse gallery
Feedback·@exepert/ui / Toast

Toast

A brief non-blocking message that confirms an event or reports a recoverable problem.

Open in Playground ↗All components

Variants and states

3 copy-ready examples

Neutral toast

A neutral message confirms a low urgency event.

Open in Playground ↗
Starting preview…
import { Button, Toast } from "@exepert/ui";
import "@exepert/ui/styles.css";
export default function Example() {
  return (
    <Toast open variant="neutral" title="View saved" description="The filter is ready for your next review." onClose={() => {}} />
  );
}

Usage

Keep the message short and provide an action when recovery is immediate.

Props

  • open: boolean
  • title: ReactNode
  • description: ReactNode
  • action: ReactNode
  • onClose: function
  • variant: neutral | success | danger

Accessibility

  • Use an appropriate live region for urgency.
  • Do not put essential instructions only in an auto-dismissing toast.

Install

Install the pinned public release, then import the component and stylesheet.

npm install @exepert/ui@0.1.0

import { Toast } from "@exepert/ui";

import "@exepert/ui/styles.css";

EXEPERTAI LAB

Compare supported models, inspect system behaviour, and understand the context around each result.

PrivacyTermsContact

EXEPERT AI is an independent software and AI research lab in Malaysia

Malaysia · hello@exepert.com

Open in Gmail ↗

© 2026 EXEPERT AI. All rights reserved.