<k-alert variant="info" :description="props.description" />

<k-alert variant="info" v-bind="props" />

<k-alert variant="success" v-bind="props" />

<k-alert variant="warn" v-bind="props" />

<k-alert variant="danger" v-bind="props" />

<k-alert variant="info" v-bind="props" accent :onClose="onClose" />

<k-alert variant="success" v-bind="props" accent :onClose="onClose" />

<k-alert variant="warn" v-bind="props" accent :onClose="onClose" />

<k-alert variant="danger" v-bind="props" accent :onClose="onClose" />

<script setup lang="ts"> const buttons = [{ label: 'View Status' }, { label: 'Dismiss' }] const title = 'Order completed' const description = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.` const onClose = () => console.log('close') const props = { title, description, buttons } </script>