Toast
Use the KToast component to display temporary notifications and informative messages to the user.
Basic Toast
TypeScript
KButton(@click="showBasic = true") Show Basic Toast KToast(v-model="showBasic" text="This is a basic toast message")
Teleport (Fixed Positioning)
TypeScript
KButton(@click="showTeleport = true") Show Teleported Toast KToast(v-model="showTeleport" text="I am teleported to body!" :teleport="true" type="success")
Variants
TypeScript
KToast(v-model="showInfo" text="Informative message" type="info") KToast(v-model="showSuccess" text="Operation successful!" type="success") KToast(v-model="showWarning" text="Watch out for this..." type="warning") KToast(v-model="showError" text="Something went wrong!" type="error")
Custom Timeout
TypeScript
KToast(v-model="showLong" text="I will stay for 10 seconds" :timeout="10000") KToast(v-model="showNoTimeout" text="I won't disappear until you close me" :timeout="0")
Attributes
Configure the KToast component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| v-model | boolean | false | Controls the visibility of the toast. |
| text | string | '' | The message content to display. |
| timeout | number | 3000 | Auto-hide delay in milliseconds. Set to 0 to disable auto-hide. |
| teleport | boolean | false | Whether to teleport the toast to document body (fixed positioning). |
| type | string | 'info' | Style variant: 'primary', 'success', 'warning', 'danger', 'info', 'error', 'default'. |