Docs
Alert
Alert
Displays a callout for user attention.
Alert title Alert content
Usage
vue
<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from "wedges-vue";
</script>
<template>
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>
</template>
API Reference
Props
Prop | Type | Default |
---|---|---|
closable | boolean | false |
color | 'gray' | 'primary' | 'info' | 'success' | 'error' | 'warning' | null | |
title * | string | |
variant | 'inline' | 'expanded' | null | 'inline' |
Slots
Slot | Description |
---|---|
default | Is the alert closable? If true, a close button will be displayed and when clicked on it will hide the alert element. |
before | Render something before the alert description. |
after | Render something after the alert description. |
Emits
Emit | Description |
---|---|
close | If the alert is closable, you can use this to trigger a function when the alert gets closed. |
Examples
Default
The data export you requested is ready!
Destructive
Successfully uploaded!
You have no credits left! Upgrade to continue.
There was a problem with your submission
Must include at least 1 number
Must include at least 2 uppercase letters
A new software update is available. See what's new.