Banner

Banner is used to highlight important information.

Page navigation navigation

React examples

Default

<Banner
  title="Info"
  description="GitHub users are now required to enable two-factor authentication as an additional security measure."
/>

<Banner
  title="Info"
  description="GitHub users are now required to enable two-factor authentication as an additional security measure."
/>

Tone variants

Banners can be used to convey different tones of information. Choose the correct variant for your use-case.

Banner variant guidelines

<Banner
  title="Critical"
  description="GitHub users are now required to enable two-factor authentication as an additional security measure."
  variant="critical"
/>

<Banner
  title="Critical"
  description="GitHub users are now required to enable two-factor authentication as an additional security measure."
  variant="critical"
/>

Dismissible

Dismissible Banner guidelines

import React from 'react'
import {Banner} from '@primer/react/experimental'
import {Button} from '@primer/react'


export default function Dismissable() {
  const [isBannerShown, setIsBannerShown] = React.useState(true)
  return isBannerShown ? (
    <Banner
      title="Info"
      description="GitHub users are now required to enable two-factor authentication as an additional security measure."
      onDismiss={() => {
        setIsBannerShown(false)
      }}
    />
  ) : (
    <Button
      onClick={() => {
        setIsBannerShown(true)
      }}
    >
      Show banner again
    </Button>
  )
}

import React from 'react'
import {Banner} from '@primer/react/experimental'
import {Button} from '@primer/react'

export default function Dismissable() {
  const [isBannerShown, setIsBannerShown] = React.useState(true)
  return isBannerShown ? (
    <Banner
      title="Info"
      description="GitHub users are now required to enable two-factor authentication as an additional security measure."
      onDismiss={() => {
        setIsBannerShown(false)
      }}
    />
  ) : (
    <Button
      onClick={() => {
        setIsBannerShown(true)
      }}
    >
      Show banner again
    </Button>
  )
}

With actions

Banner actions guidelines

<Banner
  title="Info"
  description="GitHub users are now required to enable two-factor authentication as an additional security measure."
  primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}
  secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}
/>

<Banner
  title="Info"
  description="GitHub users are now required to enable two-factor authentication as an additional security measure."
  primaryAction={<Banner.PrimaryAction>Button</Banner.PrimaryAction>}
  secondaryAction={<Banner.SecondaryAction>Button</Banner.SecondaryAction>}
/>

The Banner's title is still accessible to assistive technologies, but is visually hidden.

<Banner
  title="Info"
  hideTitle
  description="GitHub users are now required to enable two-factor authentication as an additional security measure."
/>

<Banner
  title="Info"
  hideTitle
  description="GitHub users are now required to enable two-factor authentication as an additional security measure."
/>

More code examples

See the Banner Storybook stories.

Props

Loading data for banner...