Eyebrow banner
Use the eyebrow banner to highlight important information at the top of a page.
import {EyebrowBanner} from '@primer/react-brand'
This is the default variant for the eyebrow banner component.
Use ThemeProvider to automatically adjust the visual presentation of the component to light or dark variants.
Use EyebrowBanner.Label to display a leading text for additional context.
A color prop is available to customise the color of the label.
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.
| Name | Type | Default | required | Description |
|---|---|---|---|---|
href | string | undefined | true | The URL that the eyebrow banner points to |
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 |
| Name | Type | Default | required | Description |
|---|---|---|---|---|
children | ReactNode | undefined | false | Optional secondary messaging that appears beneath the heading |
| 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 |
| 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 |