Banner

Banner component for displaying information and announcements with optional actions supporting various styles and icons.

Types

Banner visual variants. Info is default.

Info Banner

This is an example banner in info style.

Success Banner

This is an example banner in success style.

Warning Banner

This is an example banner in warning style.

Critical Banner

This is an example banner in critical style.

Intelligence Banner

This is an example banner in intelligence style.

Brand Banner

This is an example banner in brand style.

Positions

Position controls how the banner will style its borders for the position required

This is an example banner in top position.

This is an example banner in bottom position.

This is an example banner in island position.

Loading

This is an example banner message with loading true.

CTAs

CTAs allow to use a primary button and a secondary button or a checkbox to interact with the banner.

Primary Action Only

This is an example banner message primary action

Primary and Secondary Actions

This is an example banner message primary and secondary actions

Primary Action and Checkbox

This is an example banner message primary action and checkbox

If isOneLine is set to true, the banner will try to fit all the content in a single line, and will center the icon

This is an example banner message primary action

This is an example banner message primary and secondary actions

This is an example banner message primary action and checkbox.

Icons can be added to the buttons as iconBefore and iconAfter props.

Primary and Secondary Actions - Icons

This is an example banner message primary and secondary actions

Buttons can be setup with a disabled state

Primary and Secondary Actions - Disabled

This is an example banner message primary and secondary actions

Links can be added to the banner with the link prop. Can be a URL or an action. Both can have the link-out icon.

Link URL without Icon

This is an example banner message with a link URL.Link URL

Link Action with Icon

This is an example banner message with a link action.Link Action

Close

Close must be either a function to handle the close action or undefined.

Close button

This is an example banner message for a closable banner.