Alert

Displays a callout for user attention.

Basic Usage

Default Alert

This is a default alert.

Example

Variants

Use the variant prop to control the visual style of the alert.

• Default: Default style.
• Primary: Primary color style.
• Success: Success color style.
• Destructive: Destructive (error) color style.
• Warning: Warning color style.
• Info: Info color style.

Default

Default alert.

Primary

Primary alert.

Success

Success alert.

Destructive

Destructive alert.

Warning

Warning alert.

Info

Info alert.

Example

Custom Content (Closable)

You can easily add custom content, such as a close button, using composition.

Closable Alert

You can close this alert.

Example

Custom Content (Collapsible)

You can build complex interactions like collapsible alerts using standard Vue features.

Collapsible Alert

Click the arrow to expand/collapse me.

Example

With Icons

You can add icons by placing them as the first child of the Alert component.

With Icon

Alert with standard icon.

With Another Icon

Alert with another icon.

Example

Theming

Global Customization (BrConfigProvider)

You can override default CSS variables via the theme prop of BrConfigProvider.

Themed Default

Radius 1.5rem

Themed Primary

Violet primary color

Themed Destructive

Pink destructive color

Example

Local Customization (TailwindCSS)

You can directly override styles using TailwindCSS utility classes.

<template>
  <BrAlert class="bg-indigo-500 hover:bg-indigo-600">
    <BrAlertTitle>Custom Class</BrAlertTitle>
    <BrAlertDescription>Custom styled alert.</BrAlertDescription>
  </BrAlert>
</template>

API

Components

• BrAlert: The main container.
• BrAlertTitle: The title component.
• BrAlertDescription: The description component.

BrAlert Props

Name	Type	Default	Description
variant	string	'default'	Visual style variants: default, primary, success, destructive, warning, info
class	string	undefined	Custom classes