Toast

Name: Boreal UI
Author: Davin Chiupka

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`	`RoundableRoundingType`	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.