Banner

Basic

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

Colors

• Banner supports 5 colors red, green, blue, orange, and neutral and can be changed by passing the color prop.
• Default color is blue.

Sizes

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

Positions

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

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

Banner Actions

Action Buttons

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

Links

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

Custom links and actions

• You can custom urls and actions by passing custom React component

Close A Banner

Remove Close Icon Button

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

Close duration

• Banner 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 Banner from closing automatically, set the duration prop to 0 or Infinity.

Inline Banner

• Banner can be displayed inline block by using InlineBanner component.
• InlineBanner component accepts all the props of Banner component except open prop.
• By default, InlineBanner component will have inline props set to true.