import {BreakoutBanner} from '@primer/react-brand'Examples
Default
Loading
Optional description
Loading
Additional action
Loading
Vertically stacked actions
Loading
Alignment
The content alignment can be changed using the align prop on the root BreakoutBanner. This can be configured to either start or center.
Loading
Leading visual
An accessible label should always be provided for the leading visual.
Loading
Optional background image
Loading
Optional background color
Loading
Component props
BreakoutBanner Required
| name | type | default | required | description |
|---|---|---|---|---|
children | ReactNode, ReactNode[] | undefined | true | Content to include within the banner component |
align | 'start', 'center' | 'start' | true | The horizontal positioning of content wihin the banner component |
backgroundColor | 'default', 'subtle', 'string', 'ResponsiveMap' | 'subtle' | false | Optional, custom background color |
backgroundImageSrc | 'string', 'ResponsiveMap' | undefined | false | Optional, custom background image |
backgroundImagePosition | 'string', 'ResponsiveMap' | 'center' | false | Optional, custom background position |
backgroundImageSize | 'string', 'ResponsiveMap' | 'cover' | false | Optional, custom background position size |
leadingVisual | ReactElement, Icon | undefined | false | An optional leading visual that appears before the heading |
BreakoutBanner.Heading Required
| name | type | default | required | description |
|---|---|---|---|---|
children | ReactNode, ReactNode[] | undefined | true | Content to be displayed inside the BreakoutBanner.Heading component |
as | 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' | 'h3' | false | Heading level |
size | '1', '2', '3', '4', '5', '6' | '4' | false | Visual heading size, irrespective of level |
BreakoutBanner.Description
Optional child that can be used to provide additional information.
| name | type | default | required | description |
|---|---|---|---|---|
children | ReactNode, ReactNode[] | undefined | true | Content to be displayed inside the banner component |
BreakoutBanner.LinkGroup
| name | type | default | required | description |
|---|---|---|---|---|
children | Link | undefined | true | The links to be displayed within the group |
direction | 'horizontal', 'vertical', 'ResponsiveMap' | 'horizontal' | false | Positioning of the links across x and y axis |
All components forward id, className and ref by default