Banners are used to communicate accouncements and important information.


Banner composes a Flex component.

colorScheme"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo"blueThe visual color appearance of the component
isOpenbooleanShow or hide the banner.
motionPresetBannerMotion'slideOutTop'Customize the close animation.
onClose() => voidCallback fired when the close button is clicked.
status"info" | "warning" | "success" | "error"The status of the banner.
variant"subtle" | "solid"subtleThe 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?