Getting Started
InstallationVersioning
Integrations
ESLintTailwind CSS
Theming & Patterns
Composition
Polymorphic ComponentsRender Props
Components
OverviewAccordionAlert Banner
AvatarBreadcrumbsButtonButton GroupCard
Beta
CheckboxCheckbox Group
CollapsibleComboboxDialogDividerDrawerFile Input
Beta
Header BarIconIcon ButtonInline Icon ButtonInline Notification
LinkMenuNumber InputPaginationPassword InputPopoverProgressProgress RingRadioSegmented ControlSelectSide NavSliderStepper
Beta
SwitchSwitch Group
TableTabsTagText Area
Text InputToast NotificationTooltipTree

Alert Banner

1.12.0

A prominent notification component for displaying important information or system status messages. Alert banners span the full width of their container and use distinctive colors to indicate message severity.

import {AlertBanner} from "@qualcomm-ui/react/alert-banner"

Examples

Simple

Use the simple API to create a banner using minimal markup.

Heading
Description
<AlertBanner
  action={<AlertBanner.Button>Action</AlertBanner.Button>}
  description="Description"
  dismissable
  heading="Heading"
  onClose={() => console.log("close")}
/>

Composite

The composite API provides individual sub-components for custom layouts or when you need to render custom content within each slot.

Heading
Description
<AlertBanner.Root onClose={() => console.log("close")}>
  <AlertBanner.Icon />
  <AlertBanner.Heading>Heading</AlertBanner.Heading>
  <AlertBanner.Description>Description</AlertBanner.Description>
  <AlertBanner.Button>Action</AlertBanner.Button>
  <AlertBanner.CloseButton />
</AlertBanner.Root>

Emphasis

The emphasis prop controls the banner's color scheme. The default is info. Each emphasis also determines the default icon.

info
Description
success
Description
warning
Description
neutral
Description
<AlertBanner
  action={<AlertBanner.Button>Action</AlertBanner.Button>}
  description="Description"
  emphasis="info"
  heading="info"
/>

Variant

The variant prop controls visual prominence. The default strong variant uses solid backgrounds for high visibility. The subtle variant uses muted backgrounds with borders.

info
Description
success
Description
warning
Description
neutral
Description
<AlertBanner
  action={<AlertBanner.Button>Action</AlertBanner.Button>}
  description="Description"
  emphasis="info"
  heading="info"
  variant="subtle"
/>

Dismissable

The banner is a controlled component. Set dismissable to render a close button, then handle visibility state via the onClose callback. With the composite API, use <AlertBanner.CloseButton />.

Simple API
Composite API
{simpleVisible && (
  <AlertBanner
    closeButtonAriaLabel="Close this banner"
    dismissable
    heading="Simple API"
    onClose={() => setSimpleVisible(false)}
  />
)}

{compositeVisible && (
  <AlertBanner.Root
    closeButtonAriaLabel="Close this banner"
    onClose={() => setCompositeVisible(false)}
    variant="subtle"
  >
    <AlertBanner.Icon />
    <AlertBanner.Heading>Composite API</AlertBanner.Heading>
    <AlertBanner.CloseButton />
  </AlertBanner.Root>
)}

Action

The <AlertBanner.Button> was added in v1.21.0 and should be used instead of the <AlertBanner.ActionContainer> component.

Pass an <AlertBanner.Button> instance to the action prop.

Strong
Subtle
<AlertBanner
  action={<AlertBanner.Button>Take action</AlertBanner.Button>}
  heading="Strong"
  variant="strong"
/>

<AlertBanner
  action={<AlertBanner.Button>Take action</AlertBanner.Button>}
  heading="Subtle"
  variant="subtle"
/>

Explorer

Heading
Description

Component Anatomy

Hover to highlight, click to view API

rootstatus-iconheadingdescriptionactionclose-button

API

<AlertBanner>

The AlertBanner component supports every property from the AlertBanner.Root component, plus the props listed below.

PropType
action
The component used for the content of the action element.
ReactNode
actionProps
Props applied to the action container element.
AlertBannerActionContainerProps
closeButtonProps
Props applied to the close button element.
AlertBannerCloseButtonProps
description
Optional description text for the banner.
ReactNode
descriptionProps
Props applied to the description element.
AlertBannerDescriptionProps
dismissable
When true, renders a close button that calls onClose when clicked.
boolean
heading
Optional heading text for the banner.
ReactNode
headingProps
Props applied to the heading element.
AlertBannerHeadingProps
icon
Override the icon displayed in the banner. When this prop is omitted, the icon is determined by the emphasis prop.
| LucideIcon
| ReactNode
iconProps
Props applied to the icon element.
AlertBannerIconProps
action
Type
ReactNode
Description
The component used for the content of the action element.
actionProps
Type
AlertBannerActionContainerProps
Description
Props applied to the action container element.
closeButtonProps
Type
AlertBannerCloseButtonProps
Description
Props applied to the close button element.
description
Type
ReactNode
Description
Optional description text for the banner.
descriptionProps
Type
AlertBannerDescriptionProps
Description
Props applied to the description element.
dismissable
Type
boolean
Description
When true, renders a close button that calls onClose when clicked.
heading
Type
ReactNode
Description
Optional heading text for the banner.
headingProps
Type
AlertBannerHeadingProps
Description
Props applied to the heading element.
icon
Type
| LucideIcon
| ReactNode
Description
Override the icon displayed in the banner. When this prop is omitted, the icon is determined by the emphasis prop.
iconProps
Type
AlertBannerIconProps
Description
Props applied to the icon element.

Composite API

<AlertBanner.Root>

Groups all parts of the alert banner. Renders a <div> element by default.
PropTypeDefault
children
React children prop.
ReactNode
closeButtonAriaLabel
Accessible label for the close button.
string
'Close'
dir
The document's text/writing direction.
'ltr' | 'rtl'
'ltr'
emphasis
Governs the color of the banner and its icon.
| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'
'info'
onClose
Callback fired when the close button is clicked.
    () => void
    render
    Allows you to replace the component's HTML element with a different tag or component. Learn more
    | ReactElement
    | ((
        props: object,
      ) => ReactElement)
    variant
    The visual style of the banner.
    | 'strong'
    | 'subtle'
    'strong'
    children
    Type
    ReactNode
    Description
    React children prop.
    closeButtonAriaLabel
    Type
    string
    Description
    Accessible label for the close button.
    dir
    Type
    'ltr' | 'rtl'
    Description
    The document's text/writing direction.
    emphasis
    Type
    | 'info'
    | 'success'
    | 'warning'
    | 'danger'
    | 'neutral'
    Description
    Governs the color of the banner and its icon.
    onClose
    Type
    () => void
    Description
    Callback fired when the close button is clicked.
      render
      Type
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      Description
      Allows you to replace the component's HTML element with a different tag or component. Learn more
      variant
      Type
      | 'strong'
      | 'subtle'
      Description
      The visual style of the banner.

      <AlertBanner.Icon>

      An icon that indicates the banner's status. Renders a <span> element by default.
      PropType
      icon
      Override the icon displayed in the banner. When this prop is omitted, the icon is determined by the emphasis prop.
      | LucideIcon
      | ReactNode
      render
      Allows you to replace the component's HTML element with a different tag or component. Learn more
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      icon
      Type
      | LucideIcon
      | ReactNode
      Description
      Override the icon displayed in the banner. When this prop is omitted, the icon is determined by the emphasis prop.
      render
      Type
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      Description
      Allows you to replace the component's HTML element with a different tag or component. Learn more

      <AlertBanner.Heading>

      Heading of the alert banner. Renders a <div> element by default.
      PropType
      children
      React children prop.
      ReactNode
      render
      Allows you to replace the component's HTML element with a different tag or component. Learn more
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      children
      Type
      ReactNode
      Description
      React children prop.
      render
      Type
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      Description
      Allows you to replace the component's HTML element with a different tag or component. Learn more

      <AlertBanner.Description>

      Description of the alert banner. Renders a <div> element by default.
      PropType
      children
      React children prop.
      ReactNode
      render
      Allows you to replace the component's HTML element with a different tag or component. Learn more
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      children
      Type
      ReactNode
      Description
      React children prop.
      render
      Type
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      Description
      Allows you to replace the component's HTML element with a different tag or component. Learn more

      <AlertBanner.CloseButton>

      Calls the root's onClose when clicked. Renders a <button> element by default.
      PropType
      children
      React children prop.
      ReactNode
      render
      Allows you to replace the component's HTML element with a different tag or component. Learn more
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      children
      Type
      ReactNode
      Description
      React children prop.
      render
      Type
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      Description
      Allows you to replace the component's HTML element with a different tag or component. Learn more

      <AlertBanner.Button>

      The alert's primary action. Use this instead of AlertBanner.ActionContainer
      PropTypeDefault
      disabled
      Controls whether the component is interactive. When true, pointer/focus events are blocked, and the component is visually dimmed.
      boolean
      false
      endIcon
      Icon positioned after the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.
      | LucideIcon
      | ReactNode
      render
      Allows you to replace the component's HTML element with a different tag or component. Learn more
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      startIcon
      Icon positioned before the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.
      | LucideIcon
      | ReactNode
      disabled
      Type
      boolean
      Description
      Controls whether the component is interactive. When true, pointer/focus events are blocked, and the component is visually dimmed.
      endIcon
      Type
      | LucideIcon
      | ReactNode
      Description
      Icon positioned after the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.
      render
      Type
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      Description
      Allows you to replace the component's HTML element with a different tag or component. Learn more
      startIcon
      Type
      | LucideIcon
      | ReactNode
      Description
      Icon positioned before the text content. If supplied as a LucideIcon, the size will automatically match the size prop. Supply as a ReactElement for additional customization.

      <AlertBanner.ActionContainer>

      A container for the banner's primary action button. Renders a <div> element by default.
      PropType
      children
      React children prop.
      ReactNode
      render
      Allows you to replace the component's HTML element with a different tag or component. Learn more
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      children
      Type
      ReactNode
      Description
      React children prop.
      render
      Type
      | ReactElement
      | ((
          props: object,
        ) => ReactElement)
      Description
      Allows you to replace the component's HTML element with a different tag or component. Learn more
      Last updated on by Ryan Bower
      Accordion
      Avatar
      Examples
      Simple
      Composite
      Emphasis
      Variant
      Dismissable
      Action
      Explorer
      API
      <AlertBanner>
      Composite API
      <AlertBanner.Root>
      <AlertBanner.Icon>
      <AlertBanner.Heading>
      <AlertBanner.Description>
      <AlertBanner.CloseButton>
      <AlertBanner.Button>
      <AlertBanner.ActionContainer>
      Copyright © 2026 QUALCOMM incorporated. All rights reserved. This site is built with QUI Docs. Head over to the template repository to start building.