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?