Usage
Example alert
<template>
<CAlert title="Example alert">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</CAlert>
</template>
Title
Use the title prop to display a title.
Alert example
<template>
<CAlert title="Alert example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</CAlert>
</template>
Text
Use the text prop to display content. You can also use the #default slot for this.
Alert title
<template>
<CAlert title="Alert title" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." />
</template>
Dismissable
Use the dismissable prop to display a close button. This will emit an @dismiss event on click.
Alert title
<template>
<CAlert title="Alert title" dismissable>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</CAlert>
</template>
Variants
Use the variant prop to display different Alert variants such as error.
Alert title
<template>
<CAlert title="Alert title" variant="error">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</CAlert>
</template>
Slots
icon
Use the #icon slot to use a custom icon.
Example alert
<template>
<CAlert title="Example alert">
<template #icon>
<CIcon name="i-heroicons-solid-globe-alt" />
</template>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</CAlert>
</template>
Props
items
string[]
[]variant
"error" | "info" | "warning" | "success"
"info"title
string
text
string
icon
string
dismissable
boolean