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>

Visual variants

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Rounding

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

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

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

// Shadows

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

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

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

Props API

9 props
Columns
Toast props API
Default
Description
childrenReactNodeNoprops—Content rendered inside the component.
classNamestringNostyling—Additional CSS class names for the component root.
data-testidstringNotesting—Test id used to identify the component in tests.
defaultDurationnumberNoprops5000Default Duration.
placementPositionTypeNoprops"topRight"Placement.
roundingRoundableRoundingTypeNostylingconfigured default rounding (fallback: "medium")Rounding.
shadowShadowTypeNostylingconfigured default shadow (fallback: "light")Shadow.
testIdstringNoprops—Test id used to identify the component in tests.
toastClassNamestringNoprops—Additional CSS class names for the toast section.