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;
Figma component anatomy
Basic usage
Alert provides four severity levels and sets unique icons and colors.
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
Icons
Setting the icon attribute allows you to configure the icon to be shown.
Border variants
Setting the border attribute accordingly as shown below can be used to selective display top and bottom borders.
Card variant
Setting the card attribute renders the Alert within a card layout
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 action
Use actions slot to render actions
With right slot
Use right slot to render actions on the right side
With Title, description, subtitle and content
Use content and subtitle as property
With description, subtitle, content and close button
Use content and subtitle and actions as slots
With title, description, content and close button
Use content and subtitle as property
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 | - | false |
| 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 | - | 'info' |
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 |