elements

Alert

GitHub

Display an alert element to draw attention.

Usage

Pass a title to your Alert.

Heads up!

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Description

You can add a description in addition of the title.

Heads up!

You can add components to your app using the cli.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

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.

Heads up!

You can add components to your app using the cli.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Avatar

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

Heads up!

You can add components to your app using the cli.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

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.

Heads up!

You can add components to your app using the cli.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

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.

Heads up!

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

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.

Heads up!

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

Actions will render differently whether you have a description set.

Heads up!

You can add components to your app using the cli.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": null,
  "excerpt": false,
  "tag": "div"
}

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.

Heads up!

You can add components to your app using the cli. 

<template>  <UAlert title="Heads <i>up</i>!" icon="i-heroicons-command-line">    <template #title="{ title }">      <span v-html="title" />    </template>    <template #description>      You can add <b>components</b> to your app using the <u>cli</u>.    </template>  </UAlert></template>

Props

titlerequired
string

icon
string

config.default.icon

ui
any

undefined

avatar
any

null

color
any

config.default.color

variant
"solid" | "outline" | "soft" | "subtle"

config.default.variant

description
string

null

closeButton
Button

config.default.closeButton as Button

actions
(Button & { click?: Function; })[]

[]

Preset

{  "wrapper": "w-full relative overflow-hidden",  "title": "text-sm font-medium",  "description": "mt-1 text-sm leading-4 opacity-90",  "shadow": "",  "rounded": "rounded-lg",  "padding": "p-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"    }  }}

Accordion

Display togglable accordion panels.

Avatar

Display an image that represents a resource or a group of resources.