PubAlert
This is an alert component that can be used to display content in an alert. It provides various options for customizing the alert, such as adding a border, shadow, and rounded corners.
Default alerts
Prop - color Usage
There are a number of themes available for the alert, including 'blue', 'red', 'yellow', 'green', 'dark'. Below is a demo of each color.
Info alert! Change a few things up and try submitting again.
Warning alert! Change a few things up and try submitting again.
Danger alert! Change a few things up and try submitting again.
Success alert! Change a few things up and try submitting again.
Dark alert! Change a few things up and try submitting again.
vue
<template>
<pub-alert color="blue">
Info alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert color="yellow">
Warning alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert color="red">
Danger alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert color="green">
Success alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert color="grey">
Dark alert! Change a few things up and try submitting again.
</pub-alert>
</template>
<script lang="ts" setup>
import { PubAlert } from 'vuelicity'
</script>Alerts with icon
Prop - showIcon Usage
The showIcon prop can be used to display an icon in the alert.
Info alert! Change a few things up and try submitting again.
Warning alert! Change a few things up and try submitting again.
Danger alert! Change a few things up and try submitting again.
Success alert! Change a few things up and try submitting again.
Dark alert! Change a few things up and try submitting again.
vue
<template>
<pub-alert
show-icon
color="blue"
>
Info alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
show-icon
color="yellow"
>
Warning alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
show-icon
color="red"
>
Danger alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
show-icon
color="green"
>
Success alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
show-icon
color="grey"
>
Dark alert! Change a few things up and try submitting again.
</pub-alert>
</template>
<script lang="ts" setup>
import { PubAlert } from 'vuelicity'
</script>Bordered alerts
Prop - bordered Usage
The bordered prop can be used to add a border to the alert.
Info alert! Change a few things up and try submitting again.
Warning alert! Change a few things up and try submitting again.
Danger alert! Change a few things up and try submitting again.
Success alert! Change a few things up and try submitting again.
Dark alert! Change a few things up and try submitting again.
vue
<template>
<pub-alert
bordered
color="blue"
>
Info alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
bordered
color="yellow"
>
Warning alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
bordered
color="red"
>
Danger alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
bordered
color="green"
>
Success alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
bordered
color="grey"
>
Dark alert! Change a few things up and try submitting again.
</pub-alert>
</template>
<script lang="ts" setup>
import { PubAlert } from 'vuelicity'
</script>Alerts with list
Check if the password meets the following requirements:
- At least 8 characters
- At least one uppercase letter
- At least one lowercase letter
- At least one number
Check if the password meets the following requirements:
- At least 8 characters
- At least one uppercase letter
- At least one lowercase letter
- At least one number
vue
<template>
<pub-alert
show-icon
color="blue"
>
<template #title>
<p class="font-medium">
Check if the password meets the following requirements:
</p>
</template>
<ul class="mt-1.5 ml-7 list-disc list-inside">
<li>At least 8 characters</li>
<li>At least one uppercase letter</li>
<li>At least one lowercase letter</li>
<li>At least one number</li>
</ul>
</pub-alert>
<pub-alert
show-icon
color="yellow"
>
<template #title>
<p class="font-medium">
Check if the password meets the following requirements:
</p>
</template>
<ul class="mt-1.5 ml-7 list-disc list-inside">
<li>At least 8 characters</li>
<li>At least one uppercase letter</li>
<li>At least one lowercase letter</li>
<li>At least one number</li>
</ul>
</pub-alert>
</template>
<script lang="ts" setup>
import { PubAlert } from 'vuelicity'
</script>Border accent
Info alert! Change a few things up and try submitting again.
Warning alert! Change a few things up and try submitting again.
Danger alert! Change a few things up and try submitting again.
Success alert! Change a few things up and try submitting again.
Dark alert! Change a few things up and try submitting again.
vue
<template>
<pub-alert
class="border-t-4 rounded-none"
color="blue"
>
Info alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
class="border-t-4 rounded-none"
color="yellow"
>
Warning alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
class="border-t-4 rounded-none"
color="red"
>
Danger alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
class="border-t-4 rounded-none"
color="green"
>
Success alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
class="border-t-4 rounded-none"
color="grey"
>
Dark alert! Change a few things up and try submitting again.
</pub-alert>
</template>
<script lang="ts" setup>
import { PubAlert } from 'vuelicity'
</script>Dismissible alerts
Info alert! Change a few things up and try submitting again.
Warning alert! Change a few things up and try submitting again.
Danger alert! Change a few things up and try submitting again.
Success alert! Change a few things up and try submitting again.
Dark alert! Change a few things up and try submitting again.
vue
<template>
<pub-alert
dismissible
color="blue"
>
Info alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
dismissible
color="yellow"
>
Warning alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
dismissible
color="red"
>
Danger alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
dismissible
color="green"
>
Success alert! Change a few things up and try submitting again.
</pub-alert>
<pub-alert
dismissible
color="grey"
>
Dark alert! Change a few things up and try submitting again.
</pub-alert>
</template>
<script lang="ts" setup>
import { PubAlert } from 'vuelicity'
</script>Additional content
This is a success alert
More info about this success alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
This is a danger alert
More info about this danger alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
vue
<template>
<pub-alert
show-icon
color="green"
>
<template #title>
<p class="font-bold">
This is a success alert
</p>
</template>
<template #default="{ handleClose }">
<div class="mt-2 mb-4">
More info about this success alert goes here. This example text is going to run a bit longer so that you
can see how spacing within an alert works with this kind of content.
</div>
<div class="flex gap-2">
<pub-button
color="green"
size="sm"
rounded="md"
>
<template #prepend>
<pub-icon name="eye" />
</template>
View More
</pub-button>
<pub-button
color="green"
size="sm"
rounded="md"
outline
aria-label="Close"
@click="handleClose"
>
Close
</pub-button>
</div>
</template>
</pub-alert>
<pub-alert
show-icon
color="red"
>
<template #title>
<p class="font-bold">
This is a danger alert
</p>
</template>
<template #default="{ handleClose }">
<div class="mt-2 mb-4">
More info about this danger alert goes here. This example text is going to run a bit longer so that you
can see how spacing within an alert works with this kind of content.
</div>
<div class="flex gap-2">
<pub-button
color="red"
size="sm"
rounded="md"
>
<template #prepend>
<pub-icon name="eye" />
</template>
View More
</pub-button>
<pub-button
color="red"
size="sm"
rounded="md"
outline
aria-label="Close"
@click="handleClose"
>
Close
</pub-button>
</div>
</template>
</pub-alert>
</template>
<script lang="ts" setup>
import { PubAlert, PubButton, PubIcon } from 'vuelicity'
</script>Announcements alerts
New
Great job! You've acknowledged this significant alert message.
New
Great job! You've acknowledged this significant alert message.
New
Great job! You've acknowledged this significant alert message.
New
Great job! You've acknowledged this significant alert message.
New
Great job! You've acknowledged this significant alert message.
vue
<template>
<pub-alert
color="blue"
class="p-1 pe-2 rounded-full"
>
<div class="flex items-center gap-2">
<pub-badge color="blue">
New
</pub-badge>
<div class="text-sm">
Great job! You've acknowledged this
<a
href="#"
class="font-medium underline hover:no-underline"
>significant</a> alert message.
</div>
<pub-icon name="chevron-right" />
</div>
</pub-alert>
<pub-alert
color="yellow"
class="p-1 pe-2 rounded-full"
>
<div class="flex items-center gap-2">
<pub-badge color="yellow">
New
</pub-badge>
<div class="text-sm">
Great job! You've acknowledged this
<a
href="#"
class="font-medium underline hover:no-underline"
>significant</a> alert message.
</div>
<pub-icon name="chevron-right" />
</div>
</pub-alert>
<pub-alert
color="red"
class="p-1 pe-2 rounded-full"
>
<div class="flex items-center gap-2">
<pub-badge color="red">
New
</pub-badge>
<div class="text-sm">
Great job! You've acknowledged this
<a
href="#"
class="font-medium underline hover:no-underline"
>significant</a> alert message.
</div>
<pub-icon name="chevron-right" />
</div>
</pub-alert>
<pub-alert
color="green"
class="p-1 pe-2 rounded-full"
>
<div class="flex items-center gap-2">
<pub-badge color="green">
New
</pub-badge>
<div class="text-sm">
Great job! You've acknowledged this
<a
href="#"
class="font-medium underline hover:no-underline"
>significant</a> alert message.
</div>
<pub-icon name="chevron-right" />
</div>
</pub-alert>
<pub-alert
color="grey"
class="p-1 pe-2 rounded-full"
>
<div class="flex items-center gap-2">
<pub-badge color="grey">
New
</pub-badge>
<div class="text-sm">
Great job! You've acknowledged this
<a
href="#"
class="font-medium underline hover:no-underline"
>significant</a> alert message.
</div>
<pub-icon name="chevron-right" />
</div>
</pub-alert>
</template>
<script lang="ts" setup>
import { PubAlert, PubBadge, PubIcon } from 'vuelicity'
</script>Reference
Properties
| Name | Type | Default | Description | Options |
|---|---|---|---|---|
| color | String | 'blue' | The color color of the alert. | 'blue', 'red', 'yellow', 'green', 'purple', 'pink', 'grey' |
| dismissible | Boolean | false | Whether the alert is dismissible. | |
| bordered | Boolean | false | Whether to add a border to the alert. | |
| showIcon | Boolean | false | Whether to display an icon in the alert. | |
| duration | Number | 5000 | The duration of the alert in milliseconds. |
Slots
| Name | Description |
|---|---|
| default | The main content of the alert. |
| icon | Slot for a custom icon. |
| close-button | Slot for a custom close button. |
| title | Slot for a custom title. |
Events
| Name | Description |
|---|---|
| close | Emitted when the alert is closed. |