Banner

Banner is used to highlight important information.

Page navigation navigation

React

experimental

Storybook|Source

Rails

ready

Docs|Lookbook|Source

Figma

View in Figma|

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
  aria-label="Critical"
  title="Critical"
  description="GitHub users are now required to enable two-factor authentication as an additional security measure."
  variant="critical"
/>

<Banner
  aria-label="Critical"
  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
      aria-label="Info dismissable"
      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
      aria-label="Info dismissable"
      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
  aria-label="Info with actions"
  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
  aria-label="Info with actions"
  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
  aria-label="Info with hidden title"
  title="Info"
  hideTitle
  description="GitHub users are now required to enable two-factor authentication as an additional security measure."
/>

<Banner
  aria-label="Info with hidden title"
  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

Name	Default	Description
aria-label		`string` Provide an optional label to override the default name for the Banner landmark region
className		`string` Provide an optional className to add to the outermost element rendered by the Banner
description		`React.ReactNode` Provide an optional description for the Banner. This should provide supplemental information about the Banner
hideTitle		`boolean` Whether to hide the title visually.
icon		`React.ReactNode` Provide a custom icon for the Banner. This is only available when `variant` is `info` or `upsell`
onDismiss		`() => void` Optionally provide a handler to be called when the banner is dismissed. Providing this prop will show a dismiss button
primaryAction		`React.ReactNode`
secondaryAction		`React.ReactNode`
title		`React.ReactNode` The title for the Banner. This will be used as the accessible name and is required unless `Banner.Title` is used as a child
variant		`'critical' \| 'info' \| 'success' \| 'upsell' \| 'warning'`

Name	Default	Description
as		`'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'`

Banner.Description

Name	Default	Description
className		`string` Class name(s) for custom styling.

See Button for more prop options