Alert

Displays a callout for user attention.

Component Features

🎨 Multiple Variants: Supports default, primary, success, destructive, warning, info visual variants.
❌ Closable: Supports adding a close button with flexible implementation via the composable API.
📐 Collapsible: Supports collapsing long content for detailed information display.
🖼️ Icon Support: Supports adding icons to enhance visual expression.
🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

Basic Usage

<script setup>
import { BrAlert, BrAlertTitle, BrAlertDescription } from '@breezeui/vue'
import { Terminal } from 'lucide-vue-next'
</script>

<template>
  <BrAlert class="w-full">
    <Terminal class="h-4 w-4" />
    <BrAlertTitle>Default Alert</BrAlertTitle>
    <BrAlertDescription>This is a default alert.</BrAlertDescription>
  </BrAlert>
</template>

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.

<script setup>
import { BrAlert, BrAlertTitle, BrAlertDescription, BrStack } from '@breezeui/vue'
import { Terminal, Info, CheckCircle, AlertTriangle, XCircle } from 'lucide-vue-next'
</script>

<template>
  <BrStack vertical gap="4" class="w-full">
    <BrAlert variant="default">
      <Terminal class="h-4 w-4" />
      <BrAlertTitle>Default</BrAlertTitle>
      <BrAlertDescription>Default alert.</BrAlertDescription>
    </BrAlert>
    <BrAlert variant="primary">
      <Info class="h-4 w-4" />
      <BrAlertTitle>Primary</BrAlertTitle>
      <BrAlertDescription>Primary alert.</BrAlertDescription>
    </BrAlert>
    <BrAlert variant="success">
      <CheckCircle class="h-4 w-4" />
      <BrAlertTitle>Success</BrAlertTitle>
      <BrAlertDescription>Success alert.</BrAlertDescription>
    </BrAlert>
    <BrAlert variant="destructive">
      <XCircle class="h-4 w-4" />
      <BrAlertTitle>Destructive</BrAlertTitle>
      <BrAlertDescription>Destructive alert.</BrAlertDescription>
    </BrAlert>
    <BrAlert variant="warning">
      <AlertTriangle class="h-4 w-4" />
      <BrAlertTitle>Warning</BrAlertTitle>
      <BrAlertDescription>Warning alert.</BrAlertDescription>
    </BrAlert>
    <BrAlert variant="info">
      <Info class="h-4 w-4" />
      <BrAlertTitle>Info</BrAlertTitle>
      <BrAlertDescription>Info alert.</BrAlertDescription>
    </BrAlert>
  </BrStack>
</template>

Custom Content (Closable)

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

<script setup>
import { BrAlert, BrAlertTitle, BrAlertDescription } from '@breezeui/vue'
import { X, Terminal } from 'lucide-vue-next'
import { ref } from 'vue'

const visible = ref(true)
</script>

<template>
  <div v-if="visible" class="w-full">
    <BrAlert>
      <Terminal class="h-4 w-4" />
      <BrAlertTitle>Closable Alert</BrAlertTitle>
      <BrAlertDescription>You can close this alert.</BrAlertDescription>
      <button 
        class="absolute right-4 top-4 rounded-md opacity-70 ring-offset-background transition-all hover:bg-gray-100/50 hover:opacity-100 focus:outline-none active:bg-gray-200 active:scale-95 h-6 w-6 !p-0 inline-flex items-center justify-center" 
        @click="visible = false"
      >
        <X class="h-4 w-4" />
        <span class="sr-only">Close</span>
      </button>
    </BrAlert>
  </div>
  <button v-else class="text-sm underline" @click="visible = true">Reset</button>
</template>

Custom Content (Collapsible)

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

<script setup>
import { BrAlert, BrAlertTitle, BrAlertDescription } from '@breezeui/vue'
import { ChevronDown, Terminal } from 'lucide-vue-next'
import { ref } from 'vue'

const expanded = ref(false)
</script>

<template>
  <BrAlert class="w-full">
    <Terminal class="h-4 w-4" />
    <BrAlertTitle class="flex items-center justify-between">
      Collapsible Alert
      <button 
        class="rounded-md opacity-70 ring-offset-background transition-all hover:bg-gray-100/50 hover:opacity-100 focus:outline-none active:bg-gray-200 active:scale-95 h-6 w-6 !p-0 inline-flex items-center justify-center" 
        @click="expanded = !expanded"
      >
        <ChevronDown class="h-4 w-4 transition-transform duration-200" :class="{ 'rotate-180': expanded }" />
        <span class="sr-only">Toggle</span>
      </button>
    </BrAlertTitle>
    <BrAlertDescription v-show="expanded" class="mt-2">
      Click the arrow to expand/collapse me.
    </BrAlertDescription>
  </BrAlert>
</template>

With Icons

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

<script setup>
import { BrAlert, BrAlertTitle, BrAlertDescription, BrStack } from '@breezeui/vue'
import { Terminal, Waves } from 'lucide-vue-next'
</script>

<template>
  <BrStack vertical gap="4" class="w-full">
    <BrAlert>
      <Terminal class="h-4 w-4" />
      <BrAlertTitle>With Icon</BrAlertTitle>
      <BrAlertDescription>Alert with standard icon.</BrAlertDescription>
    </BrAlert>
    <BrAlert>
      <Waves class="h-4 w-4" />
      <BrAlertTitle>With Another Icon</BrAlertTitle>
      <BrAlertDescription>Alert with another icon.</BrAlertDescription>
    </BrAlert>
  </BrStack>
</template>

Theming

Global Customization (BrConfigProvider)

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

<script setup>
import { BrAlert, BrAlertTitle, BrAlertDescription, BrConfigProvider, BrStack } from '@breezeui/vue'
import { Terminal } from 'lucide-vue-next'

const theme = {
  radius: 1.5,
  primary: '#8b5cf6', // Violet
  destructive: '#ec4899', // Pink
}
</script>

<template>
  <BrConfigProvider :theme="theme" class="w-full">
    <BrStack vertical gap="4" class="p-4 border rounded-lg w-full">
      <BrAlert variant="default">
        <Terminal class="h-4 w-4" />
        <BrAlertTitle>Themed Default</BrAlertTitle>
        <BrAlertDescription>Radius 1.5rem</BrAlertDescription>
      </BrAlert>
      <BrAlert variant="primary">
        <Terminal class="h-4 w-4" />
        <BrAlertTitle>Themed Primary</BrAlertTitle>
        <BrAlertDescription>Violet primary color</BrAlertDescription>
      </BrAlert>
      <BrAlert variant="destructive">
        <Terminal class="h-4 w-4" />
        <BrAlertTitle>Themed Destructive</BrAlertTitle>
        <BrAlertDescription>Pink destructive color</BrAlertDescription>
      </BrAlert>
    </BrStack>
  </BrConfigProvider>
</template>

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

#Alert

#Component Features

#Basic Usage

#Variants

#Custom Content (Closable)

#Custom Content (Collapsible)

#With Icons

#Theming

#Global Customization (BrConfigProvider)

#Local Customization (TailwindCSS)

#API

#Components

#BrAlert Props