Show or hide the banner.
Banner
Banners are used to communicate accouncements and important information.
Banners are generally shown at the top of an app, or above the main content.
Import#
Banner
: The container, manages the banner state and visibility.BannerIcon
: The visual icon for the banner.BannerContent
: The wrapper for the banner title and description.BannerTitle
: The title of the banner to be announced by screen readers.BannerDescription
: The description of the banner to be announced by screen readers.BannerActions
: The banner actions, renders aButtonGroup
.BannerCloseButton
: The close button.
import {Banner,BannerIcon,BannerContent,BannerTitle,BannerDescription,BannerActions,BannerCloseButton,} from '@chakra-ui/react'
Usage#
<Banner><BannerIcon /><BannerContent><BannerTitle>Update available.</BannerTitle><BannerDescription>We've just released a new update, refresh to update.</BannerDescription></BannerContent><BannerActions><Button colorScheme="white" variant="solid">Refresh</Button></BannerActions><BannerCloseButton /></Banner>
Status#
Change the status of the banners by passing the status
prop. This affects the
color scheme and icon used. Banner supports error
, success
, warning
, and
info
statuses.
<Stack spacing={3}><Banner status="error"><BannerIcon /><BannerTitle>There was an error processing your payment.</BannerTitle></Banner><Banner status="success"><BannerIcon /><BannerTitle>You have 3 days left until your trial ends.</BannerTitle></Banner><Banner status="warning"><BannerIcon /><BannerTitle>Your trial ends tomorrow, upgrade now.</BannerTitle></Banner><Banner status="info"><BannerIcon /><BannerTitle>Pre-order Saas UI Pro now to get 50% discount.</BannerTitle></Banner></Stack>
Variant#
Banner
has 2 variant styles you can use. Pass the variant
prop and use either
subtle
, solid
.
<Stack spacing={3}><Banner status="success" variant="subtle"><BannerIcon /><BannerTitle>You have 3 days left untll your trial ends.</BannerTitle></Banner><Banner status="success" variant="solid"><BannerIcon /><BannerTitle>You have 3 days left untll your trial ends.</BannerTitle></Banner></Stack>
Custom icon#
Use the icon
prop to render custom icons.
<Stack spacing={3}><Banner status="success" py="2"><BannerIconicon={FiTruck}p="2"boxSize="8"bg="whiteAlpha.200"borderRadius="md"/><BannerTitle p="2">Your order has been shipped.</BannerTitle></Banner></Stack>
Composition#
Banner
ships with smaller components to allow for flexibility in creating all
kinds of layouts. Here's an example of a custom banner style and layout:
<LinkBoxas={Banner}variant="subtle"colorScheme="primary"borderRadius="full"justifyContent="center"py="2"px="3"cursor="pointer"_hover={{ bg: 'rgba(211, 190, 244, 0.2)' }}><BannerIcon boxSize="14px" /><BannerContent flex="inherit"><BannerTitle fontSize="sm"><LinkOverlay href="#">Application submitted!</LinkOverlay></BannerTitle><BannerDescription fontSize="sm">Our team will get back to you soon.</BannerDescription></BannerContent><BannerCloseButton position="absolute" top="2" right="4" /></LinkBox>
Transitions#
Banner
has build-in motion controls for showing/hiding banners and can be used together with useDisclosure
.
The default transition is slideOutTop
.
Available motion presets are:
export type BannerMotion =| 'slideOutTop'| 'slideOutBottom'| 'fade'| 'scale'| 'none'
function Page() {const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true })return (<BannerisOpen={isOpen}onClose={onClose}motionPreset="slideOutBottom"colorScheme="gray"><BannerIcon icon={FaCookie} /><BannerContent><BannerTitle>This website uses cookies.</BannerTitle><BannerDescription><Link href="#">Privacy Policy</Link></BannerDescription></BannerContent><BannerActions><Button onClick={onClose} colorScheme="white">Accept all</Button></BannerActions><BannerCloseButton /></Banner>)}
Accessibility#
A Banner
with status info
or success
will have role
of status
.
Status error
or warning
will set the role
to alert
.
Overrule the default role by setting the role
property.
<Banner role="alert" colorScheme="red">You have outstanding balance</Banner>
Props#
Banner Props#
Banner
composes a Flex
component.
isOpen
isOpen
boolean
motionPreset
motionPreset
Customize the close animation.
'slideOutTop', 'slideOutBottom', 'fade', 'scale', 'none'
'slideOutTop'
onClose
onClose
Callback fired when the close button is clicked.
(() => void)
status
status
The status of the banner.
"info" | "warning" | "success" | "error"
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?