Alert

Alerts are used to show an inline alert or message.

Examples

Basic alert

Hi everybody! This is the default alert.

Code

<template>
  <Alert v-model:visible="visible" @dismiss="reset()">
    Hi everybody! This is the default alert.
  </Alert>
</template>
<script setup lang="ts">
import { Alert } from '@/components/ui/alert'
import { ref } from 'vue'

const visible = ref(true)
const reset = () => {
  setTimeout(() => {
    visible.value = true
  }, 2000)
}
</script>

Alert with a title

Hey there!

This is an alert with a title.

Code

<template>
  <Alert v-model:visible="visible" title="Hey there!" @dismiss="reset()">
    This is an alert with a title.
  </Alert>
</template>
<script setup lang="ts">
import { Alert } from '@/components/ui/alert'
import { ref } from 'vue'

const visible = ref(true)
const reset = () => {
  setTimeout(() => {
    visible.value = true
  }, 2000)
}
</script>

Error alert

Hey there!

This is an alert with a title.

Code

<template>
  <Alert
    v-model:visible="visible"
    title="Hey there!"
    type="error"
    @dismiss="reset()"
  >
    This is an alert with a title.
  </Alert>
</template>
<script setup lang="ts">
import { Alert } from '@/components/ui/alert'
import { ref } from 'vue'

const visible = ref(true)
const reset = () => {
  setTimeout(() => {
    visible.value = true
  }, 2000)
}
</script>

Warning alert

Hey there!

This is an alert with a title.

Code

<template>
  <Alert
    v-model:visible="visible"
    title="Hey there!"
    type="warning"
    @dismiss="reset()"
  >
    This is an alert with a title.
  </Alert>
</template>
<script setup lang="ts">
import { Alert } from '@/components/ui/alert'
import { ref } from 'vue'

const visible = ref(true)
const reset = () => {
  setTimeout(() => {
    visible.value = true
  }, 2000)
}
</script>

Success alert

Hey there!

This is an alert with a title.

Code

<template>
  <Alert
    v-model:visible="visible"
    title="Hey there!"
    type="success"
    @dismiss="reset()"
  >
    This is an alert with a title.
  </Alert>
</template>
<script setup lang="ts">
import { Alert } from '@/components/ui/alert'
import { ref } from 'vue'

const visible = ref(true)
const reset = () => {
  setTimeout(() => {
    visible.value = true
  }, 2000)
}
</script>

Alert without icon

This is an alert with a title.

Code

<template>
  <Alert
    v-model:visible="visible"
    remove-icon
    @dismiss="reset()"
  >
    This is an alert with a title.
  </Alert>
</template>
<script setup lang="ts">
import { Alert } from '@/components/ui/alert'
import { ref } from 'vue'

const visible = ref(true)
const reset = () => {
  setTimeout(() => {
    visible.value = true
  }, 2000)
}
</script>

Non-dismissible alert

This is an alert with a title.

Code

<template>
  <Alert
    v-model:visible="visible"
    :dismissible="false"
    @dismiss="reset()"
  >
    This is an alert with a title.
  </Alert>
</template>
<script setup lang="ts">
import { Alert } from '@/components/ui/alert'
import { ref } from 'vue'

const visible = ref(true)
const reset = () => {
  setTimeout(() => {
    visible.value = true
  }, 2000)
}
</script>