Alert
Alerts are contextual feedback messages usable for any length of text, and can have an optional dismiss button. For choosing the context of the alert, use the color property.
<template>
<IAlert color="info">
<template #icon>
<IIcon name="ink-info" />
</template>
Heads up! This alert needs your attention, but it's not super important.
</IAlert>
<IAlert color="success">
<template #icon>
<IIcon name="ink-check" />
</template>
Well done! You successfully read this important alert message.
</IAlert>
<IAlert color="warning">
<template #icon>
<IIcon name="ink-warning" />
</template>
Warning! Better check yourself, you're not looking too good.
</IAlert>
<IAlert color="danger">
<template #icon>
<IIcon name="ink-danger" />
</template>
Oh snap! Change a few things up and try submitting again.
</IAlert>
</template>
You're able to use the size modifier to control the text and spacing size of your alerts, using one of the available sizes: sm, md, and lg.
<template>
<IAlert size="sm">
Some quick example text to build on the alert title and make up the bulk of the alert's
content.
</IAlert>
<IAlert size="md">
Some quick example text to build on the alert title and make up the bulk of the alert's
content.
</IAlert>
<IAlert size="lg">
Some quick example text to build on the alert title and make up the bulk of the alert's
content.
</IAlert>
</template>
It's very common for alerts to have an associated icon to help the user understand the significance of the alert.
<template>
<IAlert color="info">
<template #icon>
<IIcon name="ink-info" />
</template>
Some quick example text to build on the alert title and make up the bulk of the alert's
content.
</IAlert>
</template>
Your alerts accept any kind of content, giving you the flexibility to create great looking contextual messages.
You can also add an icon to the <IAlert> component by providing an icon slot. The following example makes use of the bundled Inkline icons, but you can use any icon font that you like:
<template>
<IAlert>
<template #icon>
<IIcon name="ink-info" size="lg" />
</template>
<template #title>Alert Title</template>
<p class="_margin:0">
Some quick example text to build on the alert and make up the bulk of the alert's
content.
</p>
</IAlert>
</template>
You can dismiss alerts using a combination of the provided dismissible property and v-model directive. The dismissible property will be used to show the dismiss icon. The v-model directive will show or hide the alert, resetting dismissed alerts when needed.
<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref(true);
</script>
<template>
<IAlert v-model="visible" dismissible> Whoa! Nicely done. </IAlert>
</template>