Alert

Display an alert element to draw attention.

Usage

Pass a title to your Alert.

<template>
  <UAlert title="Heads up!" />
</template>

Description

You can add a description in addition of the title.

<template>
  <UAlert
    description="You can add components to your app using the cli."
    title="Heads up!"
  />
</template>

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name} or change it globally in ui.alert.default.icon.

<template>
  <UAlert
    icon="i-heroicons-command-line"
    description="You can add components to your app using the cli."
    title="Heads up!"
  />
</template>

Avatar

Use the avatar prop as an object and configure it with any of its props.

<template>
  <UAlert
    description="You can add components to your app using the cli."
    :avatar="{ src: 'https://avatars.githubusercontent.com/u/739984?v=4' }"
    title="Heads up!"
  />
</template>

Style

Use the color and variant props to change the visual style of the Alert.

• color can be any color from the ui.colors object or white (default).
• variant can be solid (default), outline, soft or subtle.

<template>
  <UAlert
    icon="i-heroicons-command-line"
    color="primary"
    variant="solid"
    title="Heads up!"
    description="You can add components to your app using the cli."
  />
</template>

Close

Use the close-button prop to hide or customize the close button on the Alert.

You can pass all the props of the Button component to customize it through the close-button prop or globally through ui.alert.default.closeButton.

It defaults to null which means no close button will be displayed. A close event will be emitted when the close button is clicked.

<template>
  <UAlert
    :close-button="{ icon: 'i-heroicons-x-mark-20-solid', color: 'gray', variant: 'link', padded: false }"
    title="Heads up!"
  />
</template>

Actions

Use the actions prop to add actions to the Alert.

Like for closeButton, you can pass all the props of the Button component plus a click function in the action but also customize the default style for the actions globally through ui.alert.default.actionButton.

<template>
  <UAlert
    :actions="[{ label: 'Action 1' }, { variant: 'ghost', color: 'gray', label: 'Action 2' }]"
    title="Heads up!"
  />
</template>

Actions will render differently whether you have a description set.

<template>
  <UAlert
    :actions="[{ variant: 'solid', color: 'primary', label: 'Action 1' }, { variant: 'outline', color: 'primary', label: 'Action 2' }]"
    title="Heads up!"
    description="You can add components to your app using the cli."
  />
</template>

Slots

title / description

Use the #title and #description slots to customize the Alert.

This can be handy when you want to display HTML content. To achieve this, you can define those slots and use the v-html directive.

<template>
  <UAlert title="Heads <i>up</i>!" icon="i-heroicons-command-line">
    <template #title="{ title }">
      <!-- eslint-disable-next-line vue/no-v-html -->
      <span v-html="title" />
    </template>

    <template #description>
      You can add <b>components</b> to your app using the <u>cli</u>.
    </template>
  </UAlert>
</template>

icon

Use the #icon slot to customize the displayed icon.

<template>
  <UAlert title="Customize Alert Icon" description="Insert custom content into the icon slot!" icon="i-heroicons-command-line">
    <template #icon="{ icon }">
      <UBadge size="sm">
        <UIcon :name="icon" />
      </UBadge>
    </template>
  </UAlert>
</template>

avatar

Use the #avatar slot to customize the displayable avatar.

<template>
  <UAlert
    title="Customize Alert Avatar"
    description="Insert custom content into the avatar slot!"
    :avatar="{
      src: 'https://avatars.githubusercontent.com/u/739984?v=4',
      alt: 'Avatar'
    }"
  >
    <template #avatar="{ avatar }">
      <UAvatar
        v-bind="avatar"
        chip-color="primary"
        chip-text=""
        chip-position="top-right"
      />
    </template>
  </UAlert>
</template>

actions

Use the #actions slot to add custom user interaction elements.

Props

Prop	Type	Default
ui	Object	{}
color	string	config.default.color
variant	AlertVariant	config.default.variant
icon	string	config.default.icon
avatar	Avatar	null
title	string	null
description	string	null
actions	AlertAction[]	[]
closeButton	Button	config.default.closeButton as unknown as Button

Config

Config

{
  wrapper: 'w-full relative overflow-hidden',
  inner: 'w-0 flex-1',
  title: 'text-sm font-medium',
  description: 'mt-1 text-sm leading-4 opacity-90',
  actions: 'flex items-center gap-2 mt-3 flex-shrink-0',
  shadow: '',
  rounded: 'rounded-lg',
  padding: 'p-4',
  gap: 'gap-3',
  icon: {
    base: 'flex-shrink-0 w-5 h-5'
  },
  avatar: {
    base: 'flex-shrink-0 self-center',
    size: 'md'
  },
  color: {
    white: {
      solid: 'text-gray-900 dark:text-white bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800'
    }
  },
  variant: {
    solid: 'bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900',
    outline: 'text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400',
    soft: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400',
    subtle: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-25 dark:ring-opacity-25'
  },
  default: {
    color: 'white',
    variant: 'solid',
    icon: null,
    closeButton: null,
    actionButton: {
      size: 'xs',
      color: 'primary',
      variant: 'link'
    }
  }
}