Alert

The bo-alert component presents contextual feedback with a compact layout, severity variants, optional icons, and accessible alert or status roles.

Basic Usage

Heads upSomething you should know about.

<bo-alert title="Heads up" description="Something you should know about." />

Variants

Use variant to communicate the message severity:

DefaultA neutral message.

PrimaryAn informational message.

WarningProceed with care.

DestructiveSomething went wrong.

<bo-alert variant="default" title="Default" description="A neutral message." />
<bo-alert variant="primary" title="Primary" description="An informational message." />
<bo-alert variant="warning" title="Warning" description="Proceed with care." />
<bo-alert variant="destructive" title="Destructive" description="Something went wrong." />

Icons and Slots

Variant icons are shown by default when a variant provides one. Set show-icon="false" to hide the icon or pass icon to override it. The default slot replaces the generated title and description content with custom markup.

Custom contentA paragraph with a link.

<bo-alert variant="primary" title="Custom content">
  <span class="block">A paragraph with <a class="underline" href="#">a link</a>.</span>
</bo-alert>

Custom iconThe default variant icon is replaced.

<bo-alert>
  variant="primary"
  title="Custom icon"
  description="The default variant icon is replaced."
  icon="fa_solid_circle_check"
/>

Dispatching Notifications

Mount one BoAlertContainer for each position you want to support and use useAlert() from any component to dispatch a temporary notification. Each notification can target top-left, top-center, top-right, bottom-left, bottom-center, or bottom-right:

const { show } = useAlert();
 
<button @click="show({ position: 'top-left', title: 'Top left', description: 'Your changes were saved.' })">
  Show top-left notification
</button>
<BoAlertContainer position="top-left" />

API Reference

Props

Prop	Type	Default	Description
id	string	Autogenerated	The id of the element.
dataTestId	string	Autogenerated	The data test id of the element.
variant	BoAlertVariant	'default'	The variant: default, primary, warning, or destructive.
title	string	-	The title of the alert.
description	string	-	The description content.
showIcon	boolean	true	Whether to show the variant icon.
icon	Icon	-	The icon to display. Overrides the variant icon.
role	HTMLAttributes['role']	'alert'	The ARIA role of the element.

Slots

Name	Description
default	Replaces the generated title and description.