Toast

The Toast component provides brief notifications to inform users of important events or actions.

Usage & Examples

Default

default.tsx


  const { addToast } = useToast();

    <Button
      onClick={() =>
        addToast({
          title: "Saved",
          message: "Settings were updated.",
          state: "success",
          duration: 0,
        })
      }
    >
      Show toast
    </Button>

Props API

Toast props API
				Default	Description
`children`	`ReactNode`	No	props	`—`	Content rendered inside the component.
`className`	`string`	No	styling	`—`	Additional CSS class names for the component root.
`data-testid`	`string`	No	testing	`—`	Test id used to identify the component in tests.
`defaultDuration`	`number`	No	props	`5000`	Default Duration.
`placement`	`PositionType`	No	props	`"topRight"`	Placement.
`rounding`	`RoundingType`	No	styling	`configured default rounding (fallback: "medium")`	Rounding.
`shadow`	`ShadowType`	No	styling	`configured default shadow (fallback: "light")`	Shadow.
`testId`	`string`	No	props	`—`	Test id used to identify the component in tests.
`toastClassName`	`string`	No	props	`—`	Additional CSS class names for the toast section.