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 a ButtonGroup.
  • BannerCloseButton: The close button.
import {
Banner,
BannerIcon,
BannerContent,
BannerTitle,
BannerDescription,
BannerActions,
BannerCloseButton,
} from '@saas-ui/react'

Usage

Basic

import { Button } from '@chakra-ui/react'
import {
Banner,
BannerIcon,
BannerContent,
BannerTitle,
BannerDescription,
BannerActions,
BannerCloseButton,
} from '@saas-ui/react'
export default function Basic() {
return (
<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.

import { =Stack } from '@chakra-ui/react'
import { Banner, BannerIcon, BannerTitle } from '@saas-ui/react'
export default function Status() {
return (
<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>
Your subscription will renew in 3 days.
</BannerTitle>
</Banner>
</Stack>
)
}

Variants

Banner has 2 variant styles you can use. Pass the variant prop and use either subtle, solid.

import { Stack } from '@chakra-ui/react'
import { Banner, BannerIcon, BannerTitle } from '@saas-ui/react'
export default function Variants() {
return (
<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.

import { Stack } from '@chakra-ui/react'
import { Banner, BannerIcon, BannerTitle } from '@saas-ui/react'
import { FiTruck } from 'react-icons/fi'
export default function CustomIcon() {
return (
<Stack spacing={3}>
<Banner status="success" py="2">
<BannerIcon
icon={FiTruck}
p="2"
boxSize="8"
bg="whiteAlpha.200"
borderRadius="md"
/>
<BannerTitle p="2">Your order has been shipped.</BannerTitle>
</Banner>
</Stack>
)
}

Clickable banner

Make the banner clickable by wrapping it in a LinkBox and passing the as prop.

import { LinkBox, LinkOverlay } from '@chakra-ui/react'
import {
Banner,
BannerContent,
BannerIcon,
BannerTitle,
BannerDescription,
BannerCloseButton,
} from '@saas-ui/react'
export default function Clickable() {
return (
<LinkBox
as={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'
import { Button, useDisclosure } from '@chakra-ui/react'
import {
Banner,
BannerIcon,
BannerContent,
BannerTitle,
BannerDescription,
BannerActions,
BannerCloseButton,
Link,
} from '@saas-ui/react'
import { FaCookie } from 'react-icons/fi'
export default function Page() {
const { isOpen, onClose } = useDisclosure({ defaultIsOpen: true })
return (
<Banner
isOpen={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>

Was this helpful?