CTABanner

Use CTABanner to draw attention to or create urgency around a user action.
  • Experimental
  • Not reviewed for accessibility
import {CTABanner, Button} from '@primer/react-brand'

Examples

Default

Alignment

The content alignment can be changed using the align prop on the root CTABanner. This can be configured to either start or center.

Optional border

A border can be provided using the hasBorder prop on the root <CTABanner>. This will render a border around the CTABanner component giving further separation between the foreground and background. Especially when there is no shadow present on the background.

Optional background

A background can be removed using the hasBackground prop on the root <ComparisonTable>. This will render the CTABanner component without a background allowing it to blend in with its parent.

Optional shadow

The shadow can be removed using the hasShadow prop on the root CTABanner. This will render the component without the background shadow.

Shadow color customization

The default colors can be customized through dedicated CSS variables.

NameDefault LightDefault Dark
--brand-CTABanner-shadow-color-start--base-color-scale-green-5-hsl--base-color-scale-green-2-hsl
--brand-CTABanner-shadow-color-end--base-color-scale-blue-5-hsl--base-color-scale-blue-3-hsl

Component props

CTABanner Required

The first row in a table is automatically styled as a table header row.

nametypedefaultrequireddescription
childrenReactNode, ReactNode[]undefinedtrueContent to include within the banner component
alignstart, centerstarttrueThe layout applied to the content wihin the banner component
hasBorderbooleanfalsefalseA flag used to provide a border to the banner component
hasBackgroundbooleantruefalseA flag used to add a background to the banner component
classNamestringfalseCTABanner custom class

CTABanner.Heading

Optional node that can be used to provide a heading for the banner.

nametypedefaultrequireddescription
classNamestringfalseCustom class name for the ComparisonTable.Heading component
childrenReactNode, ReactNode[]undefinedtrueContent to be displayed inside the ComparisonTable.Heading component.
ash1, h2, h3, h4, h5, h6h3falseTrue symantic element to be use as the text wrapper. cell.
size1, 2, 3, 4, 5, 62falseContent size to be displayed inside the column

CTABanner.Description

Optional node that can be used to provide a description for the banner.

nametypedefaultrequireddescription
childrenReactNode, ReactNode[]undefinedtrueContent to be displayed inside the banner component

id, className and ref are forwarded by default to all children.

CTABanner.ButtonGroup

Optional node that can be used to provide a description for the banner.

nametypedefaultrequireddescription
classNamestringundefinedfalseSets a custom class on the root element
children<Button>, <Button>[]undefinedtrueThe buttons to be displayed within the group
buttonSizemedium, largelargefalseThe size of the buttons in the group
buttonsAsReactElementfalseThe semantic element that the button will be created as

id, className and ref are forwarded by default to all children.

Design tokens

cssjs
--brand-CTABanner-shadow-color-startbrand.CTABanner.shadow.color.start
--brand-CTABanner-shadow-color-endbrand.CTABanner.shadow.color.end