React
Is new design vision part implemented using new tokens?
React
Is new design vision part implemented using new tokens?
import { Banner } from '@optimus-web/core';
<Banner
primaryText="The main message of the banner"
secondaryText="A secondary text"
showIcon
onClose={() => {}}
variant="success"
/>
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 |
|
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 |
|