import { EmphasisBanner } from '@uhg-abyss/web/ui/EmphasisBanner';

children

title

color

dismissible

() => {
  return (
    <EmphasisBanner
      title="Emphasis Banner"
      color="emphasis1"
      dismissible={true}
    >
      Lorem ipsum odor amet, consectetuer adipiscing elit. Ipsum rhoncus duis
      vestibulum fringilla mollis.
    </EmphasisBanner>
  );
};

Title

Use the title prop to set the title of the Emphasis Banner. By default, the title is rendered as an <h2>, but this can be configured using the headingLevel prop.

Content

Text content

The children of the Emphasis Banner will be displayed as the main content. The content can be any ReactNode but is recommended to be a string limited to 100 characters in length.

Custom content

Use the customContent prop to add custom content below the main text content. This prop accepts any valid ReactNode.

Color

Use the color prop to set the color of the Emphasis Banner. The available options are 'emphasis1', 'emphasis2', 'emphasis3', and 'emphasis4'.

Brand icon

Use the iconBrand prop to add an IconBrand to the Emphasis Banner. The iconBrand prop accepts an object of most props of the IconBrand component, except size, which is set by the Emphasis Banner and cannot be altered.

CTA

Use the cta prop to add a call-to-action to the Emphasis Banner. The cta prop accepts an object with the following structure:

{
  primaryButton?: ButtonProps;
  secondaryButton?: ButtonProps;
  link?: LinkProps;
}

Rules for cta:

• primaryButton: A primary button must always be used with a secondary button and cannot be used alone.
• secondaryButton: A secondary button can be used alone, but not with a link.
• link: If a link is provided, it is exclusive and cannot be used with a primary button or secondary button.

ButtonProps and LinkProps are objects that accept most props of the Button and Link components, respectively, except for size, which is set by the Emphasis Banner and cannot be altered.

Dismissible

Use the dismissible prop to control whether the Emphasis Banner can be closed. The default value is true.

onClose

Use the onClose prop to execute a custom callback when the Emphasis Banner is closed.

Note

onClose is only used when dismissible is true.

Focus after close

While navigating with the keyboard, when a dismissible Emphasis Banner is closed, focus is automatically returned to the last element that had focus before the user tabbed into the banner. If that element is no longer in the DOM (e.g., because it was a close button on another banner that was already dismissed), focus falls back to the nearest preceding focusable element in the document.

Use the focusAfterClose prop to override this behavior and direct focus to a specific element regardless of where focus was before. The prop accepts a ref to the target element.

Responsiveness

On screens less than 744px wide, the Emphasis Banner will adjust its layout. Resize the window to see the change!

EmphasisBanner Props

Name	Type	Default	Required	A11y	Description
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined				The contents of the EmphasisBanner
className	string | undefined				CSS class name to apply to each element within the component
color	"emphasis1" | "emphasis2" | "emphasis3" | "emphasis4"				The color of the EmphasisBanner
css	CSSProperties | Partial<Record<"abyss-emphasis-banner-title" | "abyss-emphasis-banner-region" | "abyss-emphasis-banner-separator" | "abyss-emphasis-banner-root" | ... 12 more ... | "abyss-emphasis-banner-secondary-button", CSSProperties>> | undefined				Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
cta	EmphasisBannerCta | undefined				If present, the EmphasisBanner will display a button or a link
customContent	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined				Custom content to display below the text content
data-testid	string | undefined				Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean | undefined	false			If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
dismissible	boolean | undefined	true			If true, the EmphasisBanner can be dismissed
focusAfterClose	RefObject<HTMLElement> | undefined				A ref to the element that should receive focus when the EmphasisBanner is closed; only used when dismissible is true. When not provided, focus is automatically returned to the element that was focused when the EmphasisBanner became visible.
headingLevel	1 | 2 | 3 | 4 | 5 | 6 | undefined	2			Heading level of the EmphasisBanner title
hiddenFrom	Breakpoint | undefined				When defined, the component is hidden once the screen width reaches the specified breakpoint.
iconBrand	EmphasisBannerIconBrand | undefined				If present, the EmphasisBanner will display an IconBrand
onClose	MouseEventHandler<HTMLElement>				Callback function executed when the EmphasisBanner is closed; only used when dismissible is true
slotProps	Partial<Record<ToSlotKey<{ root: LeafSlotDef<"article", undefined>; wrapper: LeafSlotDef<"div", undefined>; iconBrand: LeafSlotDef<"span", undefined>; ... 13 more ...; region: LeafSlotDef<...>; }, "emphasis-banner">, SlotPropsLeafValue>> | undefined				Props to pass to individual internal slots of the EmphasisBanner component. See slotProps for more information
title	string				The title of the EmphasisBanner; used as its accessible name for screen readers.
visibleFrom	Breakpoint | undefined				When defined, the component is hidden until the screen width reaches the specified breakpoint.

EmphasisBanner Classes

Class Name	Description
.abyss-emphasis-banner-body-text	EmphasisBanner body text element
.abyss-emphasis-banner-close-button	EmphasisBanner close button element
.abyss-emphasis-banner-close-icon	EmphasisBanner close icon element
.abyss-emphasis-banner-content	EmphasisBanner content element
.abyss-emphasis-banner-cta-container	EmphasisBanner CTA container element
.abyss-emphasis-banner-cta-link	EmphasisBanner CTA link element
.abyss-emphasis-banner-icon-brand	EmphasisBanner icon brand element
.abyss-emphasis-banner-main-content	EmphasisBanner main content element
.abyss-emphasis-banner-primary-button	EmphasisBanner primary button element
.abyss-emphasis-banner-region	EmphasisBanner region element
.abyss-emphasis-banner-root	EmphasisBanner root element
.abyss-emphasis-banner-secondary-button	EmphasisBanner secondary button element
.abyss-emphasis-banner-separator	EmphasisBanner separator element
.abyss-emphasis-banner-text-container	EmphasisBanner text container element
.abyss-emphasis-banner-title	EmphasisBanner title element
.abyss-emphasis-banner-title-container	EmphasisBanner title container element
.abyss-emphasis-banner-wrapper	EmphasisBanner wrapper element

Keyboard Interactions

Key	Description
Tab	Moves focus on the next interactive element within the Emphasis Banner
Shift + Tab	Moves focus to the previous interactive element within the Emphasis Banner
Enter	When focus is on a button within the Emphasis Banner, pressing enter will press the button
Space	When focus is on a button within the Emphasis Banner, pressing space will press the button

Decorative Icons

The brand icon in the Emphasis Banner is considered decorative and does not require a text alternative, though one can be provided if desired.

Close Button Guidance

If the close button is present—which it is by default—it must be keyboard accessible. A keyboard-only user must be able to tab to the button, and activate it with the space bar and the enter key. When the Emphasis Banner is closed, focus must be placed back where it previously was on the page.

Component Tokens

Tip

Click on the token row to copy the token to your clipboard.

EmphasisBanner Tokens

Search tokens

Token Name	Value
emphasis-banner.color.border.separator	#4B4D4F
emphasis-banner.color.icon.utility.active	#000000
emphasis-banner.color.icon.utility.hover	#323334
emphasis-banner.color.icon.utility.rest	#4B4D4F
emphasis-banner.color.surface.container.emphasis-1	#F0F9ED
emphasis-banner.color.surface.container.emphasis-2	#FAF8F2
emphasis-banner.color.surface.container.emphasis-3	#FAFCFF
emphasis-banner.color.surface.container.emphasis-4	#E5F8FB
emphasis-banner.color.text.heading	#323334
emphasis-banner.color.text.paragraph	#4B4D4F
emphasis-banner.border-width.separator	1px
emphasis-banner.sizing.all.icon.illustrative.mobile	40px
emphasis-banner.sizing.all.icon.illustrative.web	48px
emphasis-banner.sizing.all.icon.utility	20px
emphasis-banner.spacing.gap.horizontal.buttons	8px
emphasis-banner.spacing.gap.horizontal.container.mobile	16px
emphasis-banner.spacing.gap.horizontal.container.web	24px
emphasis-banner.spacing.gap.horizontal.content.web	24px
emphasis-banner.spacing.gap.vertical.content.mobile	16px
emphasis-banner.spacing.gap.vertical.content.web	16px
emphasis-banner.spacing.gap.vertical.text.mobile	4px
emphasis-banner.spacing.gap.vertical.text.web	2px
emphasis-banner.spacing.padding.horizontal.container.web	24px
emphasis-banner.spacing.padding.left.container.mobile	16px
emphasis-banner.spacing.padding.right.container.mobile	24px
emphasis-banner.spacing.padding.vertical.container	16px