Toast

Component used to inform users of events or actions, such as success messages or error alerts. Toasts are triggered programmatically using the useVcToast composable.

You will also need to add this in your App.vue

// import { VcToastContainer } from '@wisemen/vue-core-components'

<VcToastContainer />

Props

Prop

Description

Default

description *

A description providing additional details.

-

title *

The main title of the toast.

-

type *

The type of toast. This will determine the icon and color of the toast.

-

actions

One or more action buttons to display in the toast.

[]

icon

The icon to display in the toast. This will be ignored if a preview is provided. If left unset and no preview is given, a default icon based on type is shown.

null

preview

The preview to be displayed in the toast. If set, the icon will be replaced by this preview.

null

testId

A unique identifier used for testing purposes. If set to null, no test ID will be applied.

null

Default styles

Slot

Classes

base

-

title

truncate text-sm text-primary font-semibold

actions

flex items-center gap-x-sm mt-lg

description

mt-xs line-clamp-2 text-sm text-secondary

icon

size-5 group-data-[type=success]/toast:text-success-primary group-data-[type=error]/toast:text-error-primary group-data-[type=info]/toast:text-fg-brand-primary

root

group/toast relative pointer-events-auto grid grid-cols-[auto_1fr] items-start gap-lg w-100 border border-solid border-secondary rounded-xl bg-primary dark:bg-secondary p-xl shadow-lg outline-brand-500

Examples

Error toast

Success toast

Info toast