Inline Notification

1.0.1

Inline notifications provide contextual feedback without disrupting the user's workflow. They support multiple semantic types ranging from informational updates to critical warnings.

import {InlineNotificationModule} from "@qualcomm-ui/angular/inline-notification"

Examples

Simple

The simple API bundles all subcomponents together into a single directive.

Label

Description

<div
  class="w-96"
  description="Description"
  dismissable
  label="Label"
  q-inline-notification
></div>

Child Directives

Provide child directives to customize specific elements while keeping the simple API's default structure.

Label

Description

<div class="w-96" dismissable q-inline-notification>
  <div q-inline-notification-label>Label</div>
  <div q-inline-notification-description>Description</div>
</div>

Composite

Build with the composite API for granular control. This API requires you to provide each subcomponent, but gives you full control over the structure.

Label

Description

<div class="w-96" q-inline-notification-root>
  <span q-inline-notification-icon></span>
  <button q-inline-notification-close-button></button>
  <div q-inline-notification-label>Label</div>
  <div q-inline-notification-description>Description</div>
  <button q-inline-notification-action q-link>Action</button>
</div>

Emphasis (color)

Control the visual emphasis with different colors: info, success, warning, danger, and neutral. Customize these with the emphasis prop.

info

success

warning

danger

neutral

<div emphasis="info" label="info" q-inline-notification></div>
<div emphasis="success" label="success" q-inline-notification></div>
<div emphasis="warning" label="warning" q-inline-notification></div>
<div emphasis="danger" label="danger" q-inline-notification></div>
<div emphasis="neutral" label="neutral" q-inline-notification></div>

Dismissable

Add dismiss functionality to the simple notification using the dismissable prop. Use the q-inline-notification-close-button directive when using the composite API.

Label

<div dismissable label="Label" q-inline-notification></div>

<div q-inline-notification-root>
  <span q-inline-notification-icon></span>
  <div q-inline-notification-label>Label</div>
  <button q-inline-notification-close-button></button>
</div>

Action

Include a link or action in notifications using the q-inline-notification-action directive.

Label

Description for action demo

<div
  class="w-96"
  description="Description for action demo"
  label="Label"
  q-inline-notification
>
  <button q-inline-notification-action q-link>Action</button>
</div>

Layout

Choose between inline and stacked layouts using the orientation property. Stacked layout places the description and action below the content.

Horizontal

Description for horizontal

Action

Vertical

Description for vertical

<div
  description="Description for horizontal"
  dismissable
  label="Horizontal"
  q-inline-notification
>
  <div q-inline-notification-action q-link>Action</div>
</div>

<div
  description="Description for vertical"
  dismissable
  label="Vertical"
  orientation="vertical"
  q-inline-notification
>
  <button q-inline-notification-action q-link>Action</button>
</div>

Explorer

Component Anatomy

Hover to highlight, click to view API

root status-icon heading description action close-trigger

API

q-inline-notification

The q-inline-notification directive extends the q-inline-notification-root directive with the following properties:

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

dismissable When `true`, renders a close button that dismisses the notification on click.	boolean	false

label Optional heading text for the notification.	string

description

Type

string

Description

Optional description text for the notification.

dismissable

Type

boolean

Description

When true, renders a close button that dismisses the notification on click.

label

Type

string

Description

Optional heading text for the notification.

Composite API

q-inline-notification-root

Prop	Type	Default
dir The document's text/writing direction.	'ltr' \| 'rtl'	"ltr"
emphasis Governs the color of the notification and its icon.	\| 'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral' \| 'loading'	'info'
getRootNode A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string
orientation The layout of the notification's elements. `'horizontal'`: The icon, title, description, link, and close button are displayed inline. `'vertical'`: The icon, title, and close button are placed on the first line, while the description, and link are stacked vertically and aligned with the title.	\| 'horizontal' \| 'vertical'	'horizontal'
role The WAI-ARIA role of the notification. `'alert'`: Use this role when the notification is an alert that requires the user's immediate attention, like for errors or urgent information. `'status'`: Use this role when the notification is a status message that doesn't require the user's immediate attention, like for success or informational messages.	\| 'status' \| 'alert'	'status'
(dismissed) Function invoked when the notification is dismissed	void

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

emphasis

Type

| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'
| 'loading'

Description

Governs the color of the notification and its icon.

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

orientation

Type

| 'horizontal'
| 'vertical'

Description

The layout of the notification's elements.

'horizontal': The icon, title, description, link, and close button are displayed inline.
'vertical': The icon, title, and close button are placed on the first line, while the description, and link are stacked vertically and aligned with the title.

role

Type

| 'status'
| 'alert'

Description

The WAI-ARIA role of the notification.

'alert': Use this role when the notification is an alert that requires the user's immediate attention, like for errors or urgent information.
'status': Use this role when the notification is a status message that doesn't require the user's immediate attention, like for success or informational messages.

(dismissed)

Type

void

Description

Function invoked when the notification is dismissed

q-inline-notification-icon

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

icon

Type

LucideIconData

Description

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

Attribute / Property	Value
`class`	'qui-notification__icon'
`data-inline-notification-part`	'status-icon'

q-inline-notification-label

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-notification__label'
`data-inline-notification-part`	'heading'

q-inline-notification-description

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-notification__description'
`data-inline-notification-part`	'description'

q-inline-notification-close-button

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-notification__close-button'
`data-inline-notification-part`	'close-trigger'

q-inline-notification-action

Attribute / Property	Value
`class`	'qui-notification__action'
`data-inline-notification-part`	'action'
`data-orientation`	\| 'horizontal' \| 'vertical'

class

Value

'qui-notification__action'

data-inline-notification-part

Value

'action'

data-orientation

Value

| 'horizontal'
| 'vertical'

Last updated on May 23, 2026 by Ryan Bower

Inline Icon Button

Link