The BToast and container component BToaster is used in conjunction to show Toast notifications. The idea is that there should only be one BToaster in an app. A good place would be the App.vue root component. Then in any other part of the app call createTost from the useToast composable.
<script setup lang="ts">
import { useToast } from 'bragi-vue'
import { ref, unref } from 'vue'
const message = ref('A catchy one-liner!')
const actionLabel = ref('Undo')
const duration = ref(3)
const options = ref(['Close affordance', 'Auto close'])
const type = ref<any>('notification')
const { createToast } = useToast()
function onToast() {
createToast({
type: unref(type),
message: message.value,
duration: duration.value,
action: actionLabel.value,
autoClose: options.value.includes('Auto close'),
closeIcon: options.value.includes('Close affordance'),
// eslint-disable-next-line no-alert
callback: options.value.includes('With action') ? () => alert('funky') : undefined,
})
}
</script>
<template>
<BToaster />
<FormKit
v-model="message"
type="text"
label="Toast message"
/>
<div class="flex gap-4">
<FormKit
v-model="actionLabel"
type="text"
label="Action label"
/>
<FormKit
v-model="duration"
outer-class="w-20"
type="number"
label="Timeout"
/>
</div>
<FormKit
v-model="options"
value="Olives"
type="checkbox"
label="Options"
:options="['With action', 'Close affordance', 'Auto close']"
/>
<FormKit
v-model="type"
value="Olives"
type="radio"
label="Options"
:options="['notification', 'error', 'success']"
/>
<BBtn @click="onToast">
Toast me!
</BBtn>
</template>