Alert Banner

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
    emphasis="white-persistent"
    q-alert-banner-action
    q-button
    size="sm"
    variant="outline"
  >
    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>
  <div q-alert-banner-action>
    <button
      emphasis="white-persistent"
      q-button
      size="sm"
      variant="outline"
    >
      Action
    </button>
  </div>
  <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></div>
<div emphasis="success" heading="success" q-alert-banner></div>
<div emphasis="warning" heading="warning" q-alert-banner></div>
<div emphasis="danger" heading="danger" q-alert-banner></div>
<div emphasis="neutral" heading="neutral" q-alert-banner></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"></div>
<div
  emphasis="success"
  heading="success"
  q-alert-banner
  variant="subtle"
></div>
<div
  emphasis="warning"
  heading="warning"
  q-alert-banner
  variant="subtle"
></div>
<div
  emphasis="danger"
  heading="danger"
  q-alert-banner
  variant="subtle"
></div>
<div
  emphasis="neutral"
  heading="neutral"
  q-alert-banner
  variant="subtle"
></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

Pass a button using the q-alert-banner-action directive. 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

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

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

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-part`	'status-icon'
`data-scope`	'alert-banner'

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

q-alert-banner-description

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

class

Value

'qui-alert-banner__description'

data-part

Value

'description'

data-scope

Value

'alert-banner'

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

class

Value

'qui-alert-banner__close-button'

data-part

Value

'close-button'

data-scope

Value

'alert-banner'

Attribute / Property	Value
`class`	'qui-alert-banner__action'
`data-part`	'action'
`data-scope`	'alert-banner'

Tree

Inline Notification