Toast

Basic

• Toast component will display a notification message at a corners of the viewport by setting the open prop to true.

Colors

• Toast component supports 5 colors: red, green, blue, orange, and neutral by setting the color prop.
• Default color is blue.

Sizes

• Toast component supports 4 sizes: sm, md, lg, and responsive by setting the size prop.
• Default size is lg.

Positions

• Toast component supports 6 positions: top-left, top-right, bottom-left, bottom-right, top-center, and bottom-center by setting the position prop.
• Default position is top-right.

Prefix Icon

• Toast supports icons from the @ocean-network-express/magenta-ui/icons package.
• The prop icon support to add icon or other content to the left side.

Toast Actions

• Toast can include button actions by passing the actions prop.
• The actions prop is an array of objects with the following properties:
  • label: The text to display on the button.
  • All other props are the same as the Button component.
  • Some default props in the action button are color is neutral, variant is ghost, and size is md.

Close a toast

Remove Close Icon Button

• Toast can remove the close button icon or by setting the closable prop to false.

Close duration

• Toast can be set to automatically call onClose prop after a certain duration.
• Default duration is 10000ms, it can be changed by passing the duration prop.

• To prevent the toast from closing automatically, set the duration prop to 0 or Infinity.