Banner

Use Banner component to create a box with a optional header, text, optional left-hand icon, optional right-hand close button, and palette color scheme.

This is a Banner
<Banner px={3} py={2} showIcon={false}>
  This is a Banner
</Banner>

Are Your Dates Correct?

Remember to double check the calendar because availability may change depending on your dates.
<Banner
  showIcon={false}
  bg='lightBlue'
  p={2}>
  <Flex>
    <Icon name='Calendar' />
    <Box pl={2}>
      <Heading fontSize={2} bold>Are Your Dates Correct?</Heading>
      <Text>
        Remember to double check the calendar because availability may change depending on your dates.
      </Text>
    </Box>
  </Flex>
</Banner>

Props

PropTypeDescription
bgstringSets background-color and color. Accepts blue, green, orange, red, lightBlue, lightGreen, lightOrange, lightRed. To be deprecated
headerstringSets header content
iconNamestringSets left-hand svg icon name
onClosefunctionPasses onClick functionality to close button / shows close button if provided
showIconbooleanRenders left-hand icon (true by default)
textstringSets text content
textAlignstringSets text alignment for text only (icons not affected)
colorstringThe color of the banner, defaults to secondary

Color

You can choose any palette or theme color for Banner.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus pretium turpis nec efficitur.
<Banner
  p={2}
  color="primary"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus pretium turpis nec efficitur. "
/>

Uses the color from theme.palette.primary.base.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus pretium turpis nec efficitur.
<Banner
  p={2}
  color="error"
  iconName="Warning"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus pretium turpis nec efficitur. "
/>

Uses the color from theme.palette.error.base.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus pretium turpis nec efficitur.
<Banner
  p={2}
  color="caution"
  iconName="Attention"
  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus pretium turpis nec efficitur. "
/>

Uses the color from theme.palette.warning.base.