ACV Alert

Alert displays a brief, important message without interrupting user's task.

Features

• Notifies the user about the status of the system;
• Can be closable, not available to hide alert automatically;
• Severity of alert message can be set with color property;

Basic usage

Alert provides four severity levels and sets unique icons and colors.

This is a title.

This is a description.

First actionSecond action

This is a title.

This is a description.

This is a title.

This is a description.

This is a title.

This is a description.

This is a title.

This is a description.

This is a title.

This is a description.

Source code

<script setup>
  import Alert from '@/components/alert/alert.vue';
  import Button from '@/components/button/button.vue';
  import Link from '@/components/link/link.vue';

  function onClose() {
    console.log('Alert is closed');
  }
</script>

<template>
  <Alert
    color="info"
    title="This is a title."
    description="This is a description."
    show-close
    @close="onClose"
  >
    <template #actions>
      <span><Link>First action</Link></span>
      <Link>Second action</Link>
    </template>
  </Alert>
  <Alert
    color="success"
    title="This is a title."
    description="This is a description."
    show-close
    @close="onClose"
  >
    <template #right>
      <Button>Button</Button>
    </template>
  </Alert>
  <Alert
    color="warning"
    title="This is a title."
    description="This is a description."
    show-close
    @close="onClose"
  />
  <Alert
    color="critical"
    title="This is a title."
    description="This is a description."
    show-close
    @close="onClose"
  />
  <Alert
    color="danger"
    title="This is a title."
    description="This is a description."
    show-close
    @close="onClose"
  />
  <Alert
    color="neutral"
    title="This is a title."
    description="This is a description."
    show-close
    @close="onClose"
  />
</template>

<style scoped>
.acv-alert {
  margin: 1rem 0;
}
</style>

States

Long textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreak

Long textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textLong textNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreakNobreak

Only title

Only description

Only title and close

Only description and close

Only title and actions

First actionSecond action

Only description and actions

First actionSecond action

title and description and actions and right

Only description and actions

First actionSecond action

Icons

Setting the icon attribute allows you to configure the icon to be shown.

Title

Description

Title

Description

Title

Description

Title

Description

Title

Description

Title

Description

Border variants

Setting the border attribute accordingly as shown below can be used to selective display top and bottom borders.

No border.

All borders.

Top and bottom borders.

Only top border.

Only bottom border.

Card variant

Setting the card attribute renders the Alert within a card layout

This is a description.

With title

Besides the required title attribute, you can add a description attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.

With title

This is a description.

With action

Use actions slot to render actions

With title

This is a description.

With right slot

Use right slot to render actions on the right side

With title

This is a description.

With title

This is a description.

With Title, description, subtitle and content

Use content and subtitle as property

This is title

This is a description.

With description, subtitle, content and close button

Use content and subtitle and actions as slots

This is a description ‘smd://192.168.0.1’

With title, description, content and close button

Use content and subtitle as property

This is title

This is a description.

Without close

Set show-close=false to hide the close button

Transparent background

Advanced mode

Setting advanced prop renders Alert in advanced mode.

Custom content

Alert content is fully customizable. Provide the custom content with the default slot.

Accessibility

AcvAlert component must adapt to the list of WAI-ARIA alert accessibility patterns.

Overview

Alert is a component that provides feedback messages to the user.

Usually alerts provide important and time-sensitive information without interfering ability of user to interact.

WAI-ARIA attributes

• role="alert": to indicate that the element contains an alert message.

Props

Prop name	Description	Type	Values	Default
description	Descriptive text. Can also be passed with the default slot	string	-
showBorder	Displays border	boolean	-
showClose	Is close icon visible	boolean	-
showIcon	If a variant icon is displayed	boolean	-
title	Title, can also be passed with the slot	string	-
subtitle	Subtitle, can also be passed with the slot	string	-
color	Alert variant	AcvAlertVariant	-

Events

Event name	Properties	Description
close		Emitted when the close button is clicked.

Slots

Name	Description	Bindings
icon	Content for the AcvAlert icon
title	Title
description	Subtitle
default	Custom content
actions	Content for the actions
right	Content for the right block