Getting Started
Installation
Theming & Patterns
Developer Previews
Composition
Polymorphic ComponentsRender Props
Components
Overview
Buttons
ButtonButton GroupIcon ButtonInline Icon Button
Form Controls
CheckboxCheckbox GroupComboboxNumber InputPassword InputRadioSelectSliderSwitchSwitch GroupText AreaText Input
Data Display
AvatarDividerHeader BarIconLinkSegmented ControlTableTag
Overlays
DialogDrawerMenuPopoverTooltip
Disclosure
AccordionBreadcrumbsCollapsiblePaginationSide NavStepperTabsTree
Feedback
Alert BannerInline NotificationProgressProgress RingToast Notification

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={
    <Button emphasis="white-persistent" size="sm" variant="outline">
      Action
    </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.ActionContainer>
    <Button emphasis="white-persistent" size="sm" variant="outline">
      Action
    </Button>
  </AlertBanner.ActionContainer>
  <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
success
warning
neutral
<AlertBanner emphasis="info" heading="info" />
<AlertBanner emphasis="success" heading="success" />
<AlertBanner emphasis="warning" heading="warning" />
<AlertBanner emphasis="danger" heading="danger" />
<AlertBanner emphasis="neutral" heading="neutral" />

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
success
warning
neutral
<AlertBanner emphasis="info" heading="info" variant="subtle" />
<AlertBanner emphasis="success" heading="success" variant="subtle" />
<AlertBanner emphasis="warning" heading="warning" variant="subtle" />
<AlertBanner emphasis="danger" heading="danger" variant="subtle" />
<AlertBanner emphasis="neutral" heading="neutral" 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

Pass a button to the action prop. Use size="sm" with emphasis="white-persistent" for strong banners, or emphasis="neutral" for subtle banners.

Strong
Use white-persistent emphasis for strong variant
Subtle
Use neutral emphasis for subtle variant
<AlertBanner
  action={
    <Button emphasis="white-persistent" size="sm" variant="outline">
      Take action
    </Button>
  }
  description="Use white-persistent emphasis for strong variant"
  heading="Strong"
  variant="strong"
/>

<AlertBanner
  action={
    <Button emphasis="neutral" size="sm" variant="outline">
      Take action
    </Button>
  }
  description="Use neutral emphasis for subtle variant"
  heading="Subtle"
  variant="subtle"
/>

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.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
      Tree
      Inline Notification
      Examples
      Simple
      Composite
      Emphasis
      Variant
      Dismissable
      Action
      API
      <AlertBanner>
      Composite API
      <AlertBanner.Root>
      <AlertBanner.Icon>
      <AlertBanner.Heading>
      <AlertBanner.Description>
      <AlertBanner.CloseButton>
      <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.