> ## Documentation Index > Fetch the complete documentation index at: https://www.beeq.design/llms.txt > Use this file to discover all available pages before exploring further. # Alert > An alert conveys status, progress, or required next steps to the user in a clear, contextual message. export const CodeLivePreview = ({code, children, height, removePadding = false, mode = 'shadow'}) => { const previewRef = useRef(null); const BEEQ_ESM_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.esm.js'; const BEEQ_CSS_URL = 'https://esm.sh/@beeq/core/dist/beeq/beeq.css'; const BEEQ_ICONS_URL = 'https://esm.sh/@beeq/core/dist/beeq/svg'; const ensureParentBeeqRuntime = () => { if (document.querySelector('script[data-beeq-parent-runtime]')) return; const script = document.createElement('script'); script.type = 'module'; script.src = BEEQ_ESM_URL; script.dataset.beeqParentRuntime = BEEQ_ICONS_URL; document.head.appendChild(script); }; const executeSnippetScripts = (root, runtimeWindow, previewRootArg, skipAttr) => { root.querySelectorAll('script').forEach(oldScript => { if (skipAttr && oldScript.hasAttribute(skipAttr)) return; if (oldScript.src) { const newScript = runtimeWindow.document.createElement('script'); newScript.src = oldScript.src; oldScript.replaceWith(newScript); return; } runtimeWindow.Function('previewRoot', oldScript.textContent || '')(previewRootArg); oldScript.remove(); }); }; const syncIframeMode = iframeDoc => { const root = document.documentElement; const explicitMode = root.getAttribute('bq-mode'); const isDark = root.classList.contains('dark'); const resolvedMode = explicitMode || (isDark ? 'dark' : 'light'); iframeDoc.documentElement.setAttribute('bq-mode', resolvedMode); iframeDoc.body.setAttribute('bq-mode', resolvedMode); }; useEffect(() => { if (mode === 'shadow') ensureParentBeeqRuntime(); }, [mode]); useEffect(() => { const container = previewRef.current; if (!container) return; if (removePadding) container.style.padding = '0'; container.innerHTML = ''; if (mode === 'iframe') { const iframe = document.createElement('iframe'); iframe.className = 'preview-iframe'; iframe.style.width = '100%'; iframe.style.border = '0'; iframe.style.display = 'block'; iframe.style.minHeight = height ?? '0px'; iframe.setAttribute('title', 'Live code preview'); iframe.setAttribute('loading', 'lazy'); iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin'); container.appendChild(iframe); const iframeDoc = iframe.contentDocument; const iframeWin = iframe.contentWindow; if (!iframeDoc || !iframeWin) return; iframeDoc.open(); iframeDoc.write(['', '', '', ' ', ' ', ' ', ` `, ` `, '', '', code, '', ''].join('\n')); iframeDoc.close(); syncIframeMode(iframeDoc); const modeObserver = new MutationObserver(() => syncIframeMode(iframeDoc)); modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'bq-mode'] }); executeSnippetScripts(iframeDoc, iframeWin, iframeDoc, 'data-beeq-iframe-runtime'); return () => modeObserver.disconnect(); } const shadowRoot = container.shadowRoot ?? container.attachShadow({ mode: 'open' }); if (!shadowRoot.adoptedStyleSheets.length) { const fixSheet = new CSSStyleSheet(); fixSheet.replaceSync(` bq-dropdown::part(panel), bq-panel::part(panel), bq-select::part(panel), bq-date-picker::part(panel) { z-index: 9999; } bq-tooltip::part(panel) { position: absolute; } `); shadowRoot.adoptedStyleSheets = [fixSheet]; } shadowRoot.innerHTML = [``, code].join(''); executeSnippetScripts(shadowRoot, window, shadowRoot); return undefined; }, [code, mode, height]); return
{}
{} {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}
; }; BEEQ Alert component overview BEEQ Alert component overview Alert is a lightweight message surface for conveying status, progress, or required next steps in a clear and consistent way. ## When to use Use alerts when * You need to clearly and concisely convey important information * A message applies to a page, card, section, or system-level state * Users need feedback after submitting data, changing permissions, or completing an action * Users need to know about errors, warnings, maintenance, upgrades, or time-sensitive tasks Do not use alerts when * The alert would disrupt a critical task * The message overlaps essential content or important interface controls * Its presence could confuse users or compete with a more relevant inline message * A toast, notification, or field-level validation message would be more precise ## Patterns Alerts can be used at different scopes, depending on what the message affects. Use a global alert for messages that affect the full experience. Place it directly below the navigation. Use a page alert when the message applies to the page as a whole, such as a loading failure or permission issue. Place alerts close to the affected section so users can connect the message with the content it describes. Use custom icons and CSS variables when a message has no built-in severity, but keep color and icon choices consistent. ## Anatomy BEEQ Alert component anatomy BEEQ Alert component anatomy | Part | Element | Description | | ----- | ------------ | -------------------------------------------------------------------- | | **1** | Container | The alert surface that groups the message, icon, title, and actions | | **2** | Icon | Status icon, or a custom icon when the alert uses the `default` type | | **3** | Title | The alert title content in the default slot | | **4** | Close button | Dismisses the alert unless `disable-close` is set | | **5** | Description | Optional supporting content in the `body` slot | | **6** | CTA button | Optional action content in the `footer` slot | ## Design guidelines ### Types Use a basic alert when a short title gives users enough context to understand the message. Add a description when users need supporting detail, recovery guidance, or a link to the next step. Include an action when the alert asks users to resolve the message or view related details. Place actions in the footer when users need to compare or choose between multiple next steps. Set `border` to match the surface where the alert appears. Use the same radius scale as the surrounding layout. ## Usage ### Default Use the `default` variant for general-purpose alerts. It lets you customize the `bq-icon` for messages with no associated severity. Set `open` to show the alert. Use `show()` and `hide()` when visibility is controlled programmatically. :host { flex-direction: column !important; gap: var(--bq-spacing-m) !important; } Title Title Description Link Title Description Link
Button Button
` } > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Title Title Description Link Title Description Link
Button Button
``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAlert, BqButton, BqIcon } from "@beeq/react"; <> Title Title Description Link Title Description Link
Button Button
``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAlert, BqIcon, BqButton } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAlert, BqIcon, BqButton], template: ` Title Title Description Link Title Description Link
Button Button
`, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` Alert fills the width of its parent container. ### Info Use the `info` variant when users need additional, non-critical information. It works well for context that helps users understand a state without requiring immediate action. :host { flex-direction: column !important; gap: var(--bq-spacing-m) !important; } Title Title Description Link Title Description Link
Button Button
`} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Title Title Description Link Title Description Link
Button Button
``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAlert, BqButton } from "@beeq/react"; <> Title Title Description Link Title Description Link
Button Button
``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAlert, BqButton } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAlert, BqButton], template: ` Title Title Description Link Title Description Link
Button Button
`, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Success Use the `success` variant to notify users about successful actions or positive outcomes. This type of alert is ideal for celebrating achievements, completed processes, or any operation that concludes successfully. :host { flex-direction: column !important; gap: var(--bq-spacing-m) !important; } Title Title Description Link Title Description Link
Button Button
`} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Title Title Description Link Title Description Link
Button Button
``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAlert, BqButton } from "@beeq/react"; <> Title Title Description Link Title Description Link
Button Button
``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAlert, BqButton } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAlert, BqButton], template: ` Title Title Description Link Title Description Link
Button Button
`, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Warning Use the `warning` variant to indicate potential issues or actions that users should approach with caution. This alert helps draw attention to situations that require careful consideration but may not be critical. :host { flex-direction: column !important; gap: var(--bq-spacing-m) !important; } Title Title Description Link Title Description Link
Button Button
`} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Title Title Description Link Title Description Link
Button Button
``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAlert, BqButton } from "@beeq/react"; <> Title Title Description Link Title Description Link
Button Button
``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAlert, BqButton } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAlert, BqButton], template: ` Title Title Description Link Title Description Link
Button Button
`, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ### Error Use the `error` variant for issues that require immediate attention. It works best for problems that block the task or prevent a successful outcome. :host { flex-direction: column !important; gap: var(--bq-spacing-m) !important; } Title Title Description Link Title Description Link
Button Button
`} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} Title Title Description Link Title Description Link
Button Button
``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAlert, BqButton } from "@beeq/react"; <> Title Title Description Link Title Description Link
Button Button
``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAlert, BqButton } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAlert, BqButton], template: ` Title Title Description Link Title Description Link
Button Button
`, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## Options ### Sticky Use the `sticky` attribute for persistent alerts that remain visible until users dismiss them. Sticky alerts work well for ongoing information that needs prolonged attention, such as system updates or maintenance notices. Sticky alerts support every alert type: `default`, `success`, `error`, `warning`, and `info`. :host { padding: 0 !important; position: relative; align-items: stretch !important; flex-direction: column !important; } bq-alert.is-sticky { position: absolute !important; } main { min-height: 16rem; padding: var(--bq-spacing-m); & h1 { margin-block-end: var(--bq-spacing-xl); } & div { block-size: 10rem; inline-size: 100%; border: 1px dashed var(--bq-stroke--primary); background-color: var(--bq-ui--alt); } }

Dashboard

Title Button `} > ```html HTML icon="html5" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}}

Dashboard

Title Button
``` ```jsx React icon="react" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAlert, BqButton } from "@beeq/react";

Dashboard

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

Dashboard

Title Button
`, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` Sticky alerts use a preset layout with the alert text centered at the top of the screen. ### Auto-dismiss Set `auto-dismiss` to hide the alert automatically after a delay. Use `time` to override the default 3000 ms. Set a minimum of 8000 ms for alerts with meaningful content so users have enough time to read the message. Do not use `auto-dismiss` for alerts that contain errors, required actions, or legal information. :host { flex-direction: column !important; gap: var(--bq-spacing-m) !important; } Changes saved Your settings have been updated. Enable auto-dismiss `} > ```html HTML icon="html5" theme={"theme":{"light":"one-light","dark":"night-owl"}} Changes saved Your settings have been updated. ``` ```jsx React icon="react" theme={"theme":{"light":"one-light","dark":"night-owl"}} import { BqAlert } from "@beeq/react"; Changes saved Your settings have been updated. ``` ```ts Angular icon="angular" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} import { Component } from "@angular/core"; import { BqAlert } from "@beeq/angular/standalone"; @Component({ selector: "app-root", standalone: true, imports: [BqAlert], template: ` Changes saved Your settings have been updated. `, }) export class AppComponent {} ``` ```vue Vue icon="vuejs" expandable theme={"theme":{"light":"one-light","dark":"night-owl"}} ``` ## Best practices Do Place alerts close to the content or workflow they affect. Don't Do not place alerts where they hide controls or interrupt a critical task. Do Write a short title that explains the state, then add body text only when users need context. Don't Do not use long paragraphs or unrelated links inside an alert. Do Give users enough time to read auto-dismiss alerts and keep important messages dismissible by intent. Don't Do not auto-dismiss alerts that contain errors, required actions, or legal information. Do Match the alert type, icon, and action style to the severity of the message. Don't Do not mix severity colors or custom icons in ways that make the alert harder to scan. ## Accessibility * The host uses `role="alert"` so assistive technologies announce the message when it appears. * The host sets `aria-hidden` from the `open` state, keeping hidden alerts out of the accessibility tree. * The default close button has the accessible label "Close alert." * `type` provides visual intent and a matching predefined status icon for `info`, `success`, `warning`, and `error`. * Provide a concise title in the default slot and supporting details in the `body` slot when users need more context. * The built-in type tokens (`info`, `success`, `warning`, `error`) meet WCAG AA color-contrast requirements in both light and dark themes. Verify contrast manually when using custom colors via CSS variables. * All interactive elements inside the alert — the close button, footer actions, and body links — must be reachable via `Tab` and have a visible focus indicator. * Set `time` to a minimum of 8000 ms for `auto-dismiss` alerts. Do not auto-dismiss while the user has keyboard focus or hover inside the alert. * When `sticky` is enabled, keep the page focus order logical so keyboard users can still reach the affected content. ## API reference ### Properties | Property | Attribute | Description | Type | Default | | -------------- | --------------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ----------- | | `autoDismiss` | `auto-dismiss` | If `true`, the alert will automatically hide after the specified amount of time | `boolean` | `false` | | `border` | `border` | The corner radius of the alert component | `'none'` \| `'xs2'` \| `'xs'` \| `'s'` \| `'m'` \| `'l'` \| `'full'` | `'s'` | | `disableClose` | `disable-close` | If `true`, the close button at the top right of the alert will not be shown | `boolean` | `false` | | `hideIcon` | `hide-icon` | If `true`, the alert icon will not be shown | `boolean` | `false` | | `open` | `open` | If `true`, the alert will be shown | `boolean` | `false` | | `sticky` | `sticky` | If `true`, the alert remains fixed at the top of the page, occupying the full viewport width | `boolean` | `false` | | `time` | `time` | The length of time, in milliseconds, after which the alert closes itself. Only valid when `auto-dismiss` is set | `number` | `3000` | | `type` | `type` | Type of alert | `'default'` \| `'error'` \| `'info'` \| `'success'` \| `'warning'` | `'default'` | ### Events | Event | Description | Type | | ------------- | ------------------------------------- | ------------------ | | `bqHide` | Fires when the alert starts to hide | `CustomEvent` | | `bqShow` | Fires when the alert starts to show | `CustomEvent` | | `bqAfterHide` | Fires after the alert has been hidden | `CustomEvent` | | `bqAfterShow` | Fires after the alert has been shown | `CustomEvent` | * In React, prefix events with `on`: `onBqShow`, `onBqHide`, `onBqAfterShow`, `onBqAfterHide`. * In Angular, use the event binding syntax: `(bqShow)`, `(bqHide)`, `(bqAfterShow)`, `(bqAfterHide)`. * In Vue, use the `@` shorthand: `@bqShow`, `@bqHide`, `@bqAfterShow`, `@bqAfterHide`. ### Methods | Method | Description | Type | | -------- | ------------------------- | --------------- | | `show()` | Shows the alert component | `Promise` | | `hide()` | Hides the alert component | `Promise` | ### Slots | Slot | Description | | ----------- | --------------------------------------------------------------------------------- | | *(default)* | The alert title content | | `body` | The alert description content | | `footer` | The alert footer content | | `icon` | Custom icon content. Status types render predefined icons when this slot is empty | | `btn-close` | Custom close button content | ### Shadow parts | Part | Description | | -------------- | ---------------------------------------------------------------------------------- | | `base` | The `
` container of the predefined `bq-icon` component | | `body` | The container `
` that wraps the alert description content | | `btn-close` | The native button of the `bq-button` used to close the alert | | `content` | The container `
` that wraps all alert content: title, description, and footer | | `footer` | The container `
` that wraps the alert footer content | | `icon` | The `` element used to render a predefined icon based on the alert type | | `icon-outline` | The container `
` that wraps the icon element | | `main` | The container `
` that wraps the alert main content | | `svg` | The `` element of the predefined `bq-icon` component | | `title` | The container `
` that wraps the alert title content | | `wrapper` | The wrapper container `
` inside the shadow DOM | ### CSS custom properties | Variable | Description | Default | | -------------------------------- | ----------------------------------- | ----------------------------- | | `--bq-alert--background` | Alert background color | `var(--bq-ui--secondary)` | | `--bq-alert--border-radius` | Alert border radius | `var(--bq-radius--s)` | | `--bq-alert--content-footer-gap` | Gap between content and footer | `var(--bq-spacing-s)` | | `--bq-alert--title-body-gap` | Gap between title and body | `var(--bq-spacing-s)` | | `--bq-alert--background-info` | Background color for info alerts | `var(--bq-ui--brand-alt)` | | `--bq-alert--background-success` | Background color for success alerts | `var(--bq-ui--success-alt)` | | `--bq-alert--background-warning` | Background color for warning alerts | `var(--bq-ui--warning-alt)` | | `--bq-alert--background-error` | Background color for error alerts | `var(--bq-ui--danger-alt)` | | `--bq-alert--background-default` | Background color for default alerts | `var(--bq-ui--primary)` | | `--bq-alert--border-info` | Border color for info alerts | `var(--bq-stroke--brand)` | | `--bq-alert--border-success` | Border color for success alerts | `var(--bq-stroke--success)` | | `--bq-alert--border-warning` | Border color for warning alerts | `var(--bq-stroke--warning)` | | `--bq-alert--border-error` | Border color for error alerts | `var(--bq-stroke--danger)` | | `--bq-alert--border-default` | Border color for default alerts | `var(--bq-stroke--secondary)` | | `--bq-alert--border-color` | Alert border color | `undefined` | | `--bq-alert--border-width` | Alert border width | `var(--bq-stroke-s)` | | `--bq-alert--border-style` | Alert border style | `solid` | | `--bq-alert--icon-color-info` | Icon color for info alerts | `var(--bq-icon--brand)` | | `--bq-alert--icon-color-success` | Icon color for success alerts | `var(--bq-icon--success)` | | `--bq-alert--icon-color-warning` | Icon color for warning alerts | `var(--bq-icon--warning)` | | `--bq-alert--icon-color-error` | Icon color for error alerts | `var(--bq-icon--danger)` | | `--bq-alert--icon-color-default` | Icon color for default alerts | `var(--bq-icon--primary)` | | `--bq-alert--padding` | Alert padding | `var(--bq-spacing-s)` | | `--bq-alert--min-width` | Alert minimum width | `320px` | Learn more about [styling with shadow parts](/guides/styles#component-shadow-dom-parts) and [CSS custom properties](/guides/styles#global-css-custom-properties). ## Resources Use Storybook to test behavior and states interactively, or review the source if you need implementation details. Explore all alert configurations in Storybook View the component source on GitHub