Banner
Banners are used to communicate accouncements and important information.
Props#
Banner Props#
Banner composes a Flex component.
| Prop | Type | Default | Description |
|---|---|---|---|
| colorScheme | "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo" | blue | The visual color appearance of the component |
| isOpen | boolean | Show or hide the banner. | |
| motionPreset | BannerMotion | 'slideOutTop' | Customize the close animation. |
| onClose | () => void | Callback fired when the close button is clicked. | |
| status | "info" | "warning" | "success" | "error" | The status of the banner. | |
| variant | "subtle" | "solid" | subtle | The variant of the Banner |
BannerIcon Props#
BannerIcon composes Icon and accepts a custom icon or displays an icon based on the status prop.
BannerContent Props#
BannerContent composes a Flex component.
BannerTitle Props#
BannerTitle composes a Box component.
BannerDescription Props#
BannerDescription composes a Box component.
BannerActions Props#
BannerDescription composes a ButtonGroup component and accepts variant and colorScheme props.
Was this helpful?