Toast

<template>
    <IToast color="light">
        <p>Heads up! This toast needs your attention, but it's not super important.</p>
    </IToast>

    <IToast color="dark">
        <p>Heads up! This toast needs your attention, but it's not super important.</p>
    </IToast>

    <IToast color="info">
        <p>Heads up! This toast needs your attention, but it's not super important.</p>
    </IToast>

    <IToast color="success">
        <p>Well done! You successfully read this important toast message.</p>
    </IToast>

    <IToast color="warning">
        <p>Warning! Better check yourself, you're not looking too good.</p>
    </IToast>

    <IToast color="danger">
        <p>Oh snap! Change a few things up and try submitting again.</p>
    </IToast>
</template>

<template>
    <IToast size="sm"> Some quick example text to build on the toast content. </IToast>

    <IToast size="md"> Some quick example text to build on the toast content. </IToast>

    <IToast size="lg"> Some quick example text to build on the toast content. </IToast>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const visible = ref(true);
</script>

<template>
    <IToast v-if="visible" v-model="visible" dismissible>
        <p>Whoa! This toast can be dismissed.</p>
    </IToast>
</template>

<script lang="ts" setup>
import { h } from 'vue';
import { IIcon } from '@inkline/inkline/components';

const icon = h(IIcon, { name: 'ink-circle' });
const title = h('span', 'Toast title');
const message = h('p', 'Toast icon, message, and title rendered using VNode');
</script>
<template>
    <IToast :icon="icon" :title="title" :message="message" />
</template>