Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { useToast } from "@hua-labs/hua/framework";

Toast Options

type*"success" | "error" | "warning" | "info"-docs:components.toast.props.type
message*string-docs:components.toast.props.message
titlestring-docs:components.toast.props.title
durationnumber5000docs:components.toast.props.duration
action{ label: string; onClick: () => void }-docs:components.toast.props.action

ToastProvider Props

maxToastsnumber5docs:components.toast.providerProps.maxToasts
position"top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center""top-right"docs:components.toast.providerProps.position

docs:common.basicUsagetsx
1// 1. Wrap your app with ToastProvider
2// Via framework (recommended)
3import { ToastProvider } from '@hua-labs/hua';
4// Or direct import
5// import { ToastProvider } from '@hua-labs/ui/interactive';
6 
7<ToastProvider>
8  <App />
9</ToastProvider>
10 
11// 2. Use the hook in any component
12import { useToast } from '@hua-labs/hua';
13 
14function MyComponent() {
15  const { addToast } = useToast();
16 
17  return (
18    <Button onClick={() => addToast({
19      type: "success",
20      message: "Operation completed!"
21    })}>
22      Show Toast
23    </Button>
24  );
25}
docs:components.toast.demo.withTitletsx
1addToast({
2  type: "info",
3  title: "New Update",
4  message: "A new version is available.",
5  duration: 8000
6});
Convenience Functionstsx
1import { useToast } from '@hua-labs/hua';
2 
3const { showToast, showSuccessToast, showErrorToast } = useToast();
4 
5// Quick helpers
6showSuccessToast("Saved successfully!");
7showErrorToast("Something went wrong.");
8showToast("info", "New update available.");
docs:common.withActiontsx
1addToast({
2  type: "warning",
3  message: "Your session will expire soon.",
4  action: {
5    label: "Extend",
6    onClick: () => extendSession()
7  }
8});

Provider Required

Toast requires ToastProvider to be wrapped around your app. In this documentation site, it's already configured in the root layout.

  • •docs:common.accessibility.role: docs:components.toast.accessibility.role
  • •docs:common.accessibility.autoDismiss: docs:components.toast.accessibility.autoDismiss
  • •docs:common.accessibility.keyboard: docs:components.toast.accessibility.keyboard
TooltipMenu