Dialogs
Toast

Toast

Provides dynamic feedback about an operation through a message.

    View sourceARIA Authoring

    Anatomy

    import { ToastProvider, Toast, ToastViewport } from "@lualtek/react-components";
 
export default () => {
  const [toasts, setToasts] = useState([]);
  const toastsShown = useRef(0);
 
  const onShowToast = () => {
    setToasts((oldToasts) => [
      ...oldToasts,
      {
        title: `Toast super ${toastsShown.current}`,
      },
    ]);
    toastsShown.current += 1;
  };
 
  return (
    <ToastProvider duration={3000}>
      <Button onClick={onShowToast}>Show toast</Button>
 
      {toasts.map(({ title }) => (
        <Toast key={title} title={title} />
      ))}
      <ToastViewport />
    </ToastProvider>
  );
};
    ⚠️

    You must wrap your application with ToastProvider to ensure the floating toasts are correctly placed. Read more bout it.

    API Reference

    This component extends the radix-ui Toast.Root (opens in a new tab) and InlineToast components, which expose different props that enables multiple functionalities.

    PopoverTooltip