Eyebrow banner - Brand UI

Ready to use


import {EyebrowBanner} from '@primer/react-brand'

Examples

Default

This is the default variant for the eyebrow banner component.

<EyebrowBanner href="http://githubuniverse.com">
  <EyebrowBanner.Visual>
    <img
      src="https://github.githubassets.com/assets/eyebrow-23@2x-563f292d9e30.png"
      alt="Badge featuring a GitHub logo surrounded by Universe-themed shapes"
    />
  </EyebrowBanner.Visual>
  <EyebrowBanner.Heading>GitHub Universe: Dive in to AI, security, and DevEx</EyebrowBanner.Heading>
  <EyebrowBanner.SubHeading>Get your tickets now to join us on Nov. 8-9.</EyebrowBanner.SubHeading>
</EyebrowBanner>

Color modes

Use ThemeProvider to automatically adjust the visual presentation of the component to light or dark variants.

<Stack gap="none" padding="none">
  <ThemeProvider colorMode="light">
    <Box backgroundColor="default" padding="normal" borderWidth="thin" borderStyle="solid" borderColor="default">
      <EyebrowBanner href="http://githubuniverse.com">
        <EyebrowBanner.Visual>
          <img
            src="https://github.githubassets.com/assets/eyebrow-23@2x-563f292d9e30.png"
            alt="Badge featuring a GitHub logo surrounded by Universe-themed shapes"
          />
        </EyebrowBanner.Visual>
        <EyebrowBanner.Heading>GitHub Universe: Dive in to AI, security, and DevEx</EyebrowBanner.Heading>
        <EyebrowBanner.SubHeading>Get your tickets now to join us on Nov. 8-9.</EyebrowBanner.SubHeading>
      </EyebrowBanner>
    </Box>
  </ThemeProvider>
  <ThemeProvider colorMode="dark">
    <Box backgroundColor="default" padding="normal">
      <EyebrowBanner href="http://githubuniverse.com">
        <EyebrowBanner.Visual>
          <img
            src="https://github.githubassets.com/assets/eyebrow-23@2x-563f292d9e30.png"
            alt="Badge featuring a GitHub logo surrounded by Universe-themed shapes"
          />
        </EyebrowBanner.Visual>
        <EyebrowBanner.Heading>GitHub Universe: Dive in to AI, security, and DevEx</EyebrowBanner.Heading>
        <EyebrowBanner.SubHeading>Get your tickets now to join us on Nov. 8-9.</EyebrowBanner.SubHeading>
      </EyebrowBanner>
    </Box>
  </ThemeProvider>
</Stack>

Text labels

Use EyebrowBanner.Label to display a leading text for additional context.

A color prop is available to customise the color of the label.

<Stack>
  <EyebrowBanner href="http://githubuniverse.com">
    <EyebrowBanner.Label>NEW</EyebrowBanner.Label>
    <EyebrowBanner.Heading>GitHub Copilot now available for Business</EyebrowBanner.Heading>
  </EyebrowBanner>
  <EyebrowBanner href="http://githubuniverse.com">
    <EyebrowBanner.Label color="blue-purple">NEW</EyebrowBanner.Label>
    <EyebrowBanner.Heading>GitHub Copilot now available for Business</EyebrowBanner.Heading>
  </EyebrowBanner>
  <EyebrowBanner href="http://githubuniverse.com">
    <EyebrowBanner.Label color="red">NEW</EyebrowBanner.Label>
    <EyebrowBanner.Heading>GitHub Copilot now available for Business</EyebrowBanner.Heading>
  </EyebrowBanner>
</Stack>

Icon visuals

Use EyebrowBanner.Visual with an icon prop to display a leading icon for additional context.

Icons can be SVGs or ideally Octicons. If using Octicons, import the icon from @primer/octicons-react and pass it as the icon prop.

A color option is available to customise the color of the icon.

An optional hasBackground prop can be used to fill the surrounding circle with the lighter hue of the selected color.

<Stack>
  <EyebrowBanner href="/">
    <EyebrowBanner.Visual icon={<StarIcon />} color="blue" hasBackground />
    <EyebrowBanner.Heading>GitHub Universe: Dive in to AI, security, and DevEx</EyebrowBanner.Heading>
    <EyebrowBanner.SubHeading>Get your tickets now to join us on Nov. 8-9.</EyebrowBanner.SubHeading>
  </EyebrowBanner>
  <EyebrowBanner href="/">
    <EyebrowBanner.Visual icon={<CopilotIcon />} color="blue" />
    <EyebrowBanner.Heading>GitHub Copilot now available for Business</EyebrowBanner.Heading>
  </EyebrowBanner>
</Stack>

Component props

EyebrowBanner Required

Name	Type	Default	required	Description
`href`	`string`	`undefined`	`true`	The URL that the eyebrow banner points to

EyebrowBanner.Heading Required

Please note that this is not a HTML-based heading element.

Name	Type	Default	required	Description
`children`	`ReactNode`	`undefined`	`true`	The primary messaging that appears on the top-most line

EyebrowBanner.SubHeading

Name	Type	Default	required	Description
`children`	`ReactNode`	`undefined`	`false`	Optional secondary messaging that appears beneath the heading

EyebrowBanner.Visual

Name	Type	Default	required	Description
`icon`	`'ReactNode'` `'IconProps'`	`undefined`	`false`	Optional icon. Accepts React-based Octicons
`color`	`'default'` `'blue'` `'coral'` `'green'` `'gray'` `'indigo'` `'lemon'` `'lime'` `'orange'` `'pink'` `'purple'` `'red'` `'teal'` `'yellow'`	`undefined`	`false`	Optional icon color.
`hasBackground`	`boolean`	`undefined`	`false`	Optional background color.
`children`	`ReactNode`	`undefined`	`false`	Accepts `img`, `picture` or `svg` elements

EyebrowBanner.Label

Name	Type	Default	required	Description
`color`	`'blue-purple'` `'green-blue'` `'pink-blue'` `'purple-red'` `'red-orange'` `'default'` `'blue'` `'coral'` `'green'` `'gray'` `'indigo'` `'lemon'` `'lime'` `'orange'` `'pink'` `'purple'` `'red'` `'teal'` `'yellow'`	`undefined`	`false`	Optional label color.
`children`	`ReactNode`	`undefined`	`false`	Text to appear in the label slot