Alert ​

A prominent message used to communicate important information, warnings, or status updates to the user.

Themes ​

vue
<script setup>
import { Alert } from 'frappe-ui'
const themes = ['green', 'yellow', 'red', 'blue']
</script>

<template>
  <div class="w-full gap-3 items-center grid grid-cols-2">
    <Alert
      v-for="theme in themes"
      title="Source successfully added"
      description="Discover the new feature to enhance your experience.
      See how it can help you."
      :theme
    />
  </div>
</template>

Controlled state ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Alert, Button } from 'frappe-ui'

const visible = ref(true)
</script>

<template>
  <div class="w-full gap-3 items-center grid">
    <Button variant="solid" @click="visible = !visible"> Toggle Alert </Button>

    <Alert
      v-model="visible"
      title="Source successfully added"
      description="Discover the new feature to enhance your experience."
    />
  </div>
</template>

Slots Example ​

vue
<script setup>
import { Alert, Button } from 'frappe-ui'
</script>

<template>
  <div class="w-full gap-3 items-center grid">
    <Alert
      title="Your trial ends soon!"
      variant="outline"
      description="Upgrade to keep enjoying features and future technical support."
    >
      <template #icon>
        <span class="lucide-badge-info size-4 text-ink-gray-6" />
      </template>

      <template #footer>
        <Button class="col-span-full" variant="solid"> Update now </Button>
      </template>
    </Alert>
  </div>
</template>

API Reference ​

Show types
typescript
/**
 * Visual theme used to style the alert
 */
type Theme = 'yellow' | 'blue' | 'red' | 'green'

export interface AlertProps {
  /**
   * Main heading text of the alert
   */
  title: string

  /**
   * Color theme of the alert
   * @default 'blue'
   */
  theme?: Theme

  /**
   * Visual style of the alert container
   * @default 'subtle'
   */
  variant?: 'subtle' | 'outline'

  /**
   * Optional supporting text shown below the title
   */
  description?: string

  /**
   * Whether the alert can be closed by the user
   * @default false
   */
  dismissible?: boolean
}
title*
string

Main heading text of the alert

theme
Theme

Color theme of the alert

variant
= "subtle"
"subtle" | "outline"

Visual style of the alert container

description
string

Optional supporting text shown below the title

dismissible
= true
boolean

Whether the alert can be closed by the user

modelValue
= true
boolean

Controls the visibility of the alert for dismissing or toggling it

icon
—

Custom icon shown before the content

description
—

Custom description content

footer
—

Footer content shown at the bottom of the alert

update:modelValue
[value: boolean]

Fired when the model value changes.

dismiss
any[]

Fired when the component is dismissed.

Drop ShadowAvatar