React | Banner | Made with Supernova

React

Is new design vision part implemented using new tokens?

Up to date

Storybook

React guidance

Source

GitHub code


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

Name	Description	Type
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
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

Banner

Resources

Example

API