Alert Banner

1.17.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 {AlertBannerModule} from "@qualcomm-ui/angular/alert-banner"

Examples

Simple

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

Heading

Description

<div
  description="Description"
  dismissable
  heading="Heading"
  q-alert-banner
  (closed)="onClose()"
>
  <button q-alert-banner-button>Action</button>
</div>

Composite

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

Heading

Description

<div q-alert-banner-root (closed)="onClose()">
  <span q-alert-banner-icon></span>
  <div q-alert-banner-heading>Heading</div>
  <div q-alert-banner-description>Description</div>
  <button q-alert-banner-button>Action</button>
  <button q-alert-banner-close-button></button>
</div>

Emphasis

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

info

success

warning

danger

neutral

<div emphasis="info" heading="info" q-alert-banner>
  <button q-alert-banner-button>Action</button>
</div>
<div emphasis="success" heading="success" q-alert-banner>
  <button q-alert-banner-button>Action</button>
</div>
<div emphasis="warning" heading="warning" q-alert-banner>
  <button q-alert-banner-button>Action</button>
</div>
<div emphasis="danger" heading="danger" q-alert-banner>
  <button q-alert-banner-button>Action</button>
</div>
<div emphasis="neutral" heading="neutral" q-alert-banner>
  <button q-alert-banner-button>Action</button>
</div>

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

danger

neutral

<div emphasis="info" heading="info" q-alert-banner variant="subtle">
  <button q-alert-banner-button>Action</button>
</div>
<div emphasis="success" heading="success" q-alert-banner variant="subtle">
  <button q-alert-banner-button>Action</button>
</div>
<div emphasis="warning" heading="warning" q-alert-banner variant="subtle">
  <button q-alert-banner-button>Action</button>
</div>
<div emphasis="danger" heading="danger" q-alert-banner variant="subtle">
  <button q-alert-banner-button>Action</button>
</div>
<div emphasis="neutral" heading="neutral" q-alert-banner variant="subtle">
  <button q-alert-banner-button>Action</button>
</div>

Dismissable

The banner is a controlled component. Set dismissable to render a close button, then handle visibility state via the closed output. With the composite API, use q-alert-banner-close-button.

Simple API

Composite API

@if (simpleVisible) {
  <div
    closeButtonAriaLabel="Close this banner"
    dismissable
    heading="Simple API"
    q-alert-banner
    (closed)="simpleVisible = false"
  ></div>
}

@if (compositeVisible) {
  <div
    closeButtonAriaLabel="Close this banner"
    q-alert-banner-root
    variant="subtle"
    (closed)="compositeVisible = false"
  >
    <span q-alert-banner-icon></span>
    <div q-alert-banner-heading>Composite API</div>
    <button q-alert-banner-close-button></button>
  </div>
}

Action

The q-alert-banner-button was added in v2.6.0 and should be used instead of the q-alert-banner-action directive.

Strong

Use white-persistent emphasis for strong variant

Subtle

Use neutral emphasis for subtle variant

<div
  description="Use white-persistent emphasis for strong variant"
  heading="Strong"
  q-alert-banner
  variant="strong"
>
  <button q-alert-banner-button>Take action</button>
</div>

<div
  description="Use neutral emphasis for subtle variant"
  heading="Subtle"
  q-alert-banner
  variant="subtle"
>
  <button q-alert-banner-button>Take action</button>
</div>

Explorer

Component Anatomy

Hover to highlight, click to view API

root status-icon heading description action close-button

API

The q-alert-banner directive extends the q-alert-banner-root directive with the following properties:

Prop	Type	Default
description Optional description text for the banner.	string

dismissable When `true`, renders a close button that calls `closed` when clicked.	boolean	false

heading Optional heading text for the banner.	string

description

Type

string

Description

Optional description text for the banner.

dismissable

Type

boolean

Description

When true, renders a close button that calls closed when clicked.

heading

Type

string

Description

Optional heading text for the banner.

Composite API

Prop	Type	Default
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'
variant The visual style of the banner.	\| 'strong' \| 'subtle'	'strong'
(closed) Event emitted when the close button is clicked.	void

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.

variant

Type

| 'strong'
| 'subtle'

Description

The visual style of the banner.

(closed)

Type

void

Description

Event emitted when the close button is clicked.

Prop	Type
icon Override the icon displayed in the banner. When this prop is omitted, the icon is determined by the emphasis prop.	LucideIconData

icon

Type

LucideIconData

Description

Override the icon displayed in the banner. When this prop is omitted, the icon is determined by the emphasis prop.

Attribute / Property	Value
`class`	'qui-alert-banner__icon'
`data-alert-banner-part`	'status-icon'

Attribute / Property	Value
`class`	'qui-alert-banner__heading'
`data-alert-banner-part`	'heading'

q-alert-banner-description

Attribute / Property	Value
`class`	'qui-alert-banner__description'
`data-alert-banner-part`	'description'

Attribute / Property	Value
`class`	'qui-alert-banner__close-button'
`data-alert-banner-part`	'close-button'

Prop	Type	Default
disabled Controls whether the component is interactive. When `true`, pointer/focus events are blocked, and the component is visually dimmed.	boolean	false
endIcon lucide-angular icon, positioned after the label.	\| LucideIconData \| string

startIcon lucide-angular icon, positioned before the label.	\| LucideIconData \| string

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

| LucideIconData
| string

Description

lucide-angular icon, positioned after the label.

startIcon

Type

| LucideIconData
| string

Description

lucide-angular icon, positioned before the label.

Attribute / Property	Value
`class`	'qui-alert-banner__action'
`data-alert-banner-part`	'action'
`data-button-part`	'root'
`data-density`	\| 'default' \| 'compact'
`data-disabled`
`data-kind`	'text'
`data-size`	\| 'sm' \| 'md' \| 'lg'
`data-variant`	\| 'fill' \| 'ghost' \| 'outline'

class

Value

'qui-alert-banner__action'

data-alert-banner-part

Value

'action'

data-button-part

Value

'root'

data-density

Value

| 'default'
| 'compact'

data-disabled

Value

data-kind

Value

'text'

data-size

Value

| 'sm'
| 'md'
| 'lg'

data-variant

Value

| 'fill'
| 'ghost'
| 'outline'

Last updated on May 23, 2026 by Ryan Bower

Accordion

Avatar