Alert

Basic

• Alert component will display information at a corners of the viewport by setting the open prop to true.

Colors

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

Sizes

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

Positions

• Alert 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

• Alert 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.

Alert Actions

1. Alert can include links by passing the urls prop.

The urls prop is an array of objects with the following properties:

• displayText: The text to display on the link.
• All other props are the same as the Link component.

2. You can customize urls by passing custom components.

Close an alert

Remove Close Icon Button

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

Close duration

• Alert 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.