Banner

A Banner is a notification displayed in-context to convey an important message to users.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example

Storybook failed to load. Please connect to the VPN to access.

                                                        
                                                        
                                                            import { Banner } from '@optimus-web/core';
                                                        
                                                        <Banner
                                                            primaryText="The main message of the banner"
                                                            secondaryText="A secondary text"
                                                            showIcon
                                                            onClose={() => {}}
                                                            variant="success"
                                                        />
                                                        
                                                            

API

Name

Description

Type

Default

action?

A space to add a Link component

React.ReactNode

 

centered?

This allows the primaryText, secondaryText, and the action to be horizontally centered

boolean

 

onClose?

Callback function when the x icon is clicked

(event: React.MouseEvent<HTMLElement>) => void;

 

primaryText

The primary text to be displayed in the banner

React.ReactNode

 

secondaryText?

The secondary text to be displayed in the banner

React.ReactNode

 

showIcon?

Show or hide the icon rendered on the left side

boolean

true

variant

Defines the default background color and the icon rendered in the header.

BannerVariant

info | success | warning | error

 

wordBreak?

Options to allow the primaryText, secondaryText, and the action text be split in different ways

TypographyOptions['wordBreak']

 

icon?

Icon value replacing the default from the variant

IconName