Alert

Display an alert element to draw attention.

Usage

Pass a title to your Alert.

Heads up!

<template>
  <s-alert title="Heads up!" />
</template>

Description

You can add a description in addition of the title.

Heads up!

You can add components to your app using the cli.

<template>
  <s-alert
      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: icon-[{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.

<template>
  <s-alert
      icon="icon-[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.

Heads up!

You can add components to your app using the cli.

<template>
  <s-alert
      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.

Heads up!

You can add components to your app using the cli.

<template>
  <s-alert
      icon="icon-[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.

Heads up!

<script setup>
const close = () => {
  alert('The closed event is functioning perfectly!')
}
</script>
<template>
  <s-alert
      :close-button="{ icon: 'icon-[heroicons--x-mark-20-solid]', color: 'gray', variant: 'link', padded: false }"
      title="Heads up!"
      @close="close"
  />
</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.

Heads up!

<template>
  <s-alert
      :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.

Heads up!

You can add components to your app using the cli.

<template>
  <s-alert
      :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.

Heads up!

You can add components to your app using the cli.

<template>
  <s-alert title="Heads <i>up</i>!" icon="icon-[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>
  </s-alert>
</template>