{}

{} {children &&

{children}

}

; }; export const CardTile = ({title, href, imageLightSrc, imageDarkSrc, children, enableImgZoom}) => { if (!href) { return

{imageLightSrc && {title}

} {imageDarkSrc && {title}

} {title &&

{title}

}

{children}

; } return {imageLightSrc && {title}

} {imageDarkSrc && {title}

} {title &&

{title}

}

{children}

; };

Notifications inform people about significant events, status changes, or updates that need their awareness without requiring an immediate response. They appear at the edge of the interface, stack gracefully when multiple are present, and dismiss automatically or on demand. Use notifications for system-level messages and status updates. When feedback belongs directly to a field, control, or focused task area, keep it closer to that context instead. ## When to use Use notifications when * Communicating system events, errors, or status changes users need to know about * Providing asynchronous feedback that is not tied to a specific field or control * Stacking multiple independent alerts in a fixed portal without blocking content * Showing updates that users should notice but do not need to answer immediately Do not use notifications when * The feedback is a direct result of a user action and belongs near that action * The message is so critical that users must not be able to miss or dismiss it * The text is too long to scan quickly * The message needs detailed explanation rather than a short, scannable summary ## Patterns A standard notification containing a title and description to give users a quick overview. Includes a title, description, and icon so users can distinguish the meaning of the notification more quickly. Includes a title, icon, and description with an optional link. Links that lead to different pages should open in a new tab. These notifications enable users to take specific actions directly from the notification through footer buttons and linked content. ## Anatomy BEEQ Notification component anatomy

A notification is composed of a container, an icon, a label, an optional close button, an optional description, and optional call-to-action buttons. | Part | Element | Description | | ----- | ------------ | ----------------------------------------------------------------------------- | | **1** | Container | The outer surface that groups the notification content into one message block | | **2** | Icon | A semantic icon that communicates the notification type at a glance | | **3** | Label | The primary message in the notification (default slot) | | **4** | Close button | Optional control that allows the user to dismiss the notification manually | | **5** | Description | Optional supporting text or links shown in the `body` slot | | **6** | CTA buttons | Optional action buttons shown in the `footer` slot | ## Design guidelines Choose the notification treatment that matches the urgency of the message without interrupting the current task. Lead with the most important information. Notifications work best when users can understand them in a quick scan. Match the type to the meaning of the message so the icon and visual treatment reinforce the content. Start by deciding whether the message is informational, successful, cautionary, or error-related. That determines the right `type`. Add footer actions only when users genuinely need a next step such as retrying, reviewing, or navigating. Use inline open notifications for contained layouts. Use `toast()` for stacked, portal-based notifications outside the document flow. If you use `auto-dismiss`, make sure the timeout gives users enough time to read the content and does not remove important information too quickly. ## Usage ### Default Use the default `info` notification for standard messages and updates. :host { flex-direction: column !important; align-items: stretch !important; gap: var(--bq-spacing-m) !important; } .footer-btns { display: flex; gap: var(--bq-spacing-xs); } bq-notification[open] { display: block; } Title

Title This is some description text Link

`} > ```js JavaScript icon="js" theme={"theme":{"light":"one-light","dark":"night-owl"}} const notifications = previewRoot.querySelectorAll("bq-notification"); notifications.forEach((notification) => { notification.addEventListener("bqHide", () => { setTimeout(() => notification.show(), 1500); }); }); ``` ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Title

Title This is some description text Link

Button

``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqButton, BqNotification } from "@beeq/react"; const handleHide = (event) => { setTimeout(() => event.target.show(), 1500); }; export function DefaultNotification() { return ( <> Title Title This is some description text{" "} Link Title This is some description text{" "} Link

Button Button

); } ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqButton, BqNotification } from "@beeq/angular/standalone"; @Component({ selector: "app-default-notification", standalone: true, imports: [BqButton, BqNotification], template: ` Title

Title This is some description text Link

Button

`, }) export class DefaultNotificationComponent { handleHide(event: CustomEvent): void { setTimeout(() => (event.target as HTMLBqNotificationElement).show(), 1500); } } ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` Notifications take up the full width of their parent container. Wrap them in a container with a `max-width` if you need a more constrained layout. ## Options ### Semantic types Use semantic `type` values to communicate severity and intent clearly. :host { flex-direction: column !important; align-items: stretch !important; gap: var(--bq-spacing-m) !important; } bq-notification[open] { display: block; } Error

Neutral

Success

Warning

`} > ```js JavaScript icon="js" theme={"theme":{"light":"one-light","dark":"night-owl"}} const notifications = previewRoot.querySelectorAll("bq-notification"); notifications.forEach((notification) => { notification.addEventListener("bqHide", () => { setTimeout(() => notification.show(), 1500); }); }); ``` ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}} Error

Neutral

Success

Warning ``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqNotification } from "@beeq/react"; const handleHide = (event) => { setTimeout(() => event.target.show(), 1500); }; export function SemanticTypesNotification() { return ( <> Error Neutral Success Warning ); } ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqNotification } from "@beeq/angular/standalone"; @Component({ selector: "app-semantic-types-notification", standalone: true, imports: [BqNotification], template: ` Error

Neutral

Success

Warning `, }) export class SemanticTypesNotificationComponent { handleHide(event: CustomEvent): void { setTimeout(() => (event.target as HTMLBqNotificationElement).show(), 1500); } } ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Custom icon Use the `icon` slot to replace the default type icon with a custom `bq-icon`. :host { flex-direction: column !important; align-items: stretch !important; gap: var(--bq-spacing-m) !important; } .footer-btns { display: flex; gap: var(--bq-spacing-xs); } bq-notification[open] { display: block; } Title

Title This is some description text Link

Button

``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqButton, BqIcon, BqNotification } from "@beeq/react"; const handleHide = (event) => { setTimeout(() => event.target.show(), 1500); }; export function CustomIconNotification() { return ( <> Title Title This is some description text{" "} Link Title This is some description text{" "} Link

Button Button

); } ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqButton, BqIcon, BqNotification } from "@beeq/angular/standalone"; @Component({ selector: "app-custom-icon-notification", standalone: true, imports: [BqButton, BqIcon, BqNotification], template: ` Title

Title This is some description text Link

Button

`, }) export class CustomIconNotificationComponent { handleHide(event: CustomEvent): void { setTimeout(() => (event.target as HTMLBqNotificationElement).show(), 1500); } } ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Stacked notifications Use the `toast()` method to render notifications in a fixed-position portal that stacks multiple notifications vertically outside the normal document flow. The component creates and reuses a `.bq-notification-portal` element attached to `document.body`, and BEEQ global styles position that portal for you. In framework apps, prefer a framework-owned portal or stack when you want the notification lifecycle to stay declarative. :host { align-items: flex-start !important; flex-direction: column !important; gap: var(--bq-spacing-s) !important; }

The notification portal stacks multiple notifications vertically in a fixed position.

Only one portal exists at a time and it is added or removed from the DOM as needed.

Open notification

`} > ```js JavaScript icon="js" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} const openBtn = previewRoot.querySelector("#notification-stacked-btn"); const NOTIFICATION_TYPES = ["error", "info", "neutral", "success", "warning"]; const getRandomType = () => NOTIFICATION_TYPES[Math.floor(Math.random() * NOTIFICATION_TYPES.length)]; openBtn.addEventListener("bqClick", async () => { await customElements.whenDefined("bq-notification"); const type = getRandomType(); const notification = Object.assign(document.createElement("bq-notification"), { type, autoDismiss: true, innerHTML: ` Title Here goes the description for the ${type} notification
You can also add a Link `, }); document.body.append(notification); notification.toast(); }); ``` ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}}

The notification portal stacks multiple notifications vertically in a fixed position.

Only one portal exists at a time and it is added or removed from the DOM as needed.

Open notification ``` ```tsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import type { CSSProperties } from "react"; import { useCallback, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { BqButton, BqNotification } from "@beeq/react"; const NOTIFICATION_TYPES = ["error", "info", "neutral", "success", "warning"] as const; type NotificationType = (typeof NOTIFICATION_TYPES)[number]; type NotificationItem = { id: number; type: NotificationType }; const notificationPortalStyles: CSSProperties = { position: "fixed", insetInlineEnd: 0, top: 0, zIndex: 50, maxBlockSize: "100%", maxInlineSize: "100%", }; const notificationStyles: CSSProperties = { display: "block", margin: "var(--bq-spacing-m)", }; const getRandomType = () => NOTIFICATION_TYPES[Math.floor(Math.random() * NOTIFICATION_TYPES.length)]; export function StackedNotifications() { const [notifications, setNotifications] = useState([]); const nextNotificationId = useRef(0); const portalTarget = typeof document === "undefined" ? null : document.body; const handleOpen = useCallback(() => { setNotifications((current) => [ ...current, { id: ++nextNotificationId.current, type: getRandomType() }, ]); }, []); const handleAfterClose = useCallback((id: number) => { setNotifications((current) => current.filter((notification) => notification.id !== id)); }, []); return ( <>

The notification portal stacks multiple notifications vertically in a fixed position.

Only one portal exists at a time and it is added or removed from the DOM as needed.

Open notification {portalTarget && createPortal(

{notifications.map(({ id, type }) => ( handleAfterClose(id)} style={notificationStyles} > Title Here goes the description for the {type} notification
You can also add a Link ))}

, portalTarget, )} ); } ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqButton, BqNotification } from "@beeq/angular/standalone"; type NotificationType = "error" | "info" | "neutral" | "success" | "warning"; interface NotificationItem { id: number; type: NotificationType; } const NOTIFICATION_TYPES: NotificationType[] = ["error", "info", "neutral", "success", "warning"]; @Component({ selector: "app-stacked-notifications", standalone: true, imports: [BqButton, BqNotification], template: `

The notification portal stacks multiple notifications vertically in a fixed position.

Only one portal exists at a time and it is added or removed from the DOM as needed.

Open notification

@for (notification of notifications; track notification.id) { Title Here goes the description for the {{ notification.type }} notification
You can also add a Link }

`, styles: [` .notification-portal { position: fixed; inset-inline-end: 0; top: 0; z-index: 50; max-block-size: 100%; max-inline-size: 100%; } .notification-portal bq-notification { display: block; margin: var(--bq-spacing-m); } `], }) export class StackedNotificationsComponent { notifications: NotificationItem[] = []; private nextNotificationId = 0; openNotification(): void { this.notifications = [ ...this.notifications, { id: ++this.nextNotificationId, type: this.getRandomType() }, ]; } removeNotification(id: number): void { this.notifications = this.notifications.filter((notification) => notification.id !== id); } private getRandomType(): NotificationType { return NOTIFICATION_TYPES[Math.floor(Math.random() * NOTIFICATION_TYPES.length)]; } } ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## Best practices Do Position notifications at the edges of the screen so they do not block the main content. Don't Do not position notifications in the center of the screen where they compete with the main task. Do Keep messages concise and direct, and lead with the most important information. Don't Do not use long descriptions in notifications because they reduce scanability. Do Use the correct `type` so the icon and visual treatment reinforce the message severity. Don't Do not rely on custom colors or ambiguous language to communicate urgency. Do Provide a close button or a thoughtful auto-dismiss timeout so users can dismiss notifications predictably. Don't Do not use all-caps or unnecessary typographic emphasis in notification copy. ## Accessibility * **Built-in alert role** — the component applies `role="alert"` to the notification host element, which implicitly carries `aria-live="assertive"`. Assistive technology announces new notifications immediately when they appear. * **Visibility tied to `open`** — the host also receives `aria-hidden="true"` when `open` is `false`, removing it from the accessibility tree when not visible. * **Color alone is not enough**: the icon and message text should work together so users who cannot perceive color still understand the notification. * **Keep interactive elements reachable**: users must be able to tab to the close button, links, and footer actions and activate them with the keyboard. * **Use considerate auto-dismiss timing**: if `auto-dismiss` is enabled, give users enough time to read the content before it disappears. * **Do not steal focus**: stacked notifications are non-modal and should not move focus unexpectedly away from the current task. ## API reference ### Properties | Property | Attribute | Description | Type | Default | | -------------- | --------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ----------- | | `autoDismiss` | `auto-dismiss` | If `true`, the notification closes automatically after `time` milliseconds | `boolean` | `undefined` | | `border` | `border` | Border radius of the notification component | `"none" \| "xs2" \| "xs" \| "s" \| "m" \| "l" \| "full"` | `"s"` | | `disableClose` | `disable-close` | If `true`, the close button is not shown | `boolean` | `undefined` | | `hideIcon` | `hide-icon` | If `true`, the type icon is not shown | `boolean` | `undefined` | | `open` | `open` | If `true`, the notification is visible | `boolean` | `undefined` | | `time` | `time` | Duration in milliseconds before auto-dismissal. Only valid when `auto-dismiss` is `true` | `number` | `3000` | | `type` | `type` | The semantic type of the notification | `"error" \| "info" \| "neutral" \| "success" \| "warning"` | `"info"` | ### Events | Event | Description | Type | | -------------- | --------------------------------------------- | ---------------------------------------- | | `bqAfterClose` | Fired after the notification finishes closing | `CustomEvent` | | `bqAfterOpen` | Fired after the notification finishes opening | `CustomEvent` | | `bqHide` | Fired when the notification is about to hide | `CustomEvent` | | `bqShow` | Fired when the notification is about to show | `CustomEvent` | * In React, prefix events with `on`: `onBqHide`, `onBqShow`, `onBqAfterClose`, `onBqAfterOpen`. * In Angular, use the event binding syntax: `(bqHide)`, `(bqShow)`, `(bqAfterClose)`, `(bqAfterOpen)`. * In Vue, use the `@` shorthand: `@bqHide`, `@bqShow`, `@bqAfterClose`, `@bqAfterOpen`. ### Methods | Method | Description | Returns | | --------- | -------------------------------------------------------------- | --------------- | | `hide()` | Hides the notification | `Promise` | | `show()` | Shows the notification | `Promise` | | `toast()` | Renders the notification in the fixed-position stacking portal | `Promise` | ### Slots | Slot | Description | | ----------- | ------------------------------------------------------ | | *(default)* | The notification title content | | `body` | The notification description content | | `btn-close` | Replaces the default close button content | | `footer` | The notification footer content | | `icon` | Replaces the default type icon with a custom `bq-icon` | ### Shadow parts | Part | Description | | -------------- | --------------------------------------------------------------- | | `base` | The `

` container of the predefined `bq-icon` | | `body` | The `

` wrapping all notification content | | `footer` | The `

` wrapping the icon element | | `main` | The `

` wrapping the notification main content | | `svg` | The `

` wrapping the notification title content | | `wrapper` | The outermost wrapper `

` inside the shadow DOM | ### CSS custom properties | Variable | Description | Default | | --------------------------------------- | ------------------------------------ | ------------------------- | | `--bq-notification--background` | Notification background color | `var(--bq-ui--primary)` | | `--bq-notification--border-color` | Notification border color | `transparent` | | `--bq-notification--border-radius` | Notification border radius | `var(--bq-radius--s)` | | `--bq-notification--border-style` | Notification border style | `none` | | `--bq-notification--border-width` | Notification border width | `unset` | | `--bq-notification--box-shadow` | Notification box shadow | `var(--bq-box-shadow--l)` | | `--bq-notification--content-footer-gap` | Gap between content and footer | `var(--bq-spacing-m)` | | `--bq-notification--icon-color-error` | Icon color for error notifications | `var(--bq-icon--danger)` | | `--bq-notification--icon-color-info` | Icon color for info notifications | `var(--bq-icon--brand)` | | `--bq-notification--icon-color-neutral` | Icon color for neutral notifications | `var(--bq-icon--primary)` | | `--bq-notification--icon-color-success` | Icon color for success notifications | `var(--bq-icon--success)` | | `--bq-notification--icon-color-warning` | Icon color for warning notifications | `var(--bq-icon--warning)` | | `--bq-notification--min-width` | Minimum notification width | `320px` | | `--bq-notification--padding` | Notification padding | `var(--bq-spacing-m)` | | `--bq-notification--title-body-gap` | Gap between title and body | `var(--bq-spacing-s)` | Learn more about [styling with shadow parts](/guides/styles#component-shadow-dom-parts) and [CSS custom properties](/guides/styles#global-css-custom-properties). ## Resources Explore all notification types and states in the Storybook playground. Browse the full source code, including implementation, tests, and styles.