diff --git a/components/ui/Toast.jinja b/components/ui/Toast.jinja
index b2dd6f33..9f4cf943 100644
--- a/components/ui/Toast.jinja
+++ b/components/ui/Toast.jinja
@@ -1,5 +1,5 @@
-{#def
- id: str = "",
+{# def
+ id: str,
className: str = "",
duration: int = 30000, # duration in milliseconds
#}
diff --git a/components/ui/ToastContent.jinja b/components/ui/ToastContent.jinja
index 7e01c49d..60dc6560 100644
--- a/components/ui/ToastContent.jinja
+++ b/components/ui/ToastContent.jinja
@@ -1,4 +1,4 @@
-{#def
+{# def
type: str = "default",
title: str = "",
description: str = "",
diff --git a/components/ui/ToastTrigger.jinja b/components/ui/ToastTrigger.jinja
index 74401998..8a008590 100644
--- a/components/ui/ToastTrigger.jinja
+++ b/components/ui/ToastTrigger.jinja
@@ -1,7 +1,7 @@
-{#def
+{# def
className: str = "",
variant: str = "default",
- toast_target: str = "",
+ toast_target: str,
#}
{% set click_action="$dispatch('show-toast', '" + toast_target + "')" %}
diff --git a/documentation/backend/templates/toast_destructive.html b/documentation/backend/templates/toast_destructive.html
index 7a6637c8..d86e020a 100644
--- a/documentation/backend/templates/toast_destructive.html
+++ b/documentation/backend/templates/toast_destructive.html
@@ -1,6 +1,6 @@
Show Toast
-
+
Show Error Toast
-
+
Show Success Toast
-
+
Show Warning Toast
-
+
## Props
-| Prop | Type | Default | Description |
-|---------------|--------|---------|---------------------------------------------|
-| `className` | String | `""` | Additional CSS classes for customization. |
-| `value` | String | `""` | The value of the textarea |
-| `placeholder` | String | `""` | Placeholder text displayed in the textarea. |
-| `disabled` | bool | `""` | Disables the textarea |
+| Component | Prop | Type | Default | Description |
+|--------------|----------------|--------|-------------|---------------------------------------------------------------------------------------------------------|
+| Toast | `id` | String | | The css id for the Toast. |
+| Toast | `className` | String | `""` | Additional CSS classes for the toast container. |
+| Toast | `duration` | Number | `30000` | Duration in milliseconds before toast auto-dismisses. |
+| ToastContent | `type` | String | `"default"` | Style variant of the toast. Options: `"default"`, `"success"`, `"error"`, `"warning"`, `"destructive"`. |
+| ToastContent | `title` | String | `""` | The title text displayed in the toast. |
+| ToastContent | `description` | String | `""` | The description text displayed below the title. |
+| ToastTrigger | `className` | String | `""` | Additional CSS classes for the trigger button. |
+| ToastTrigger | `variant` | String | `"default"` | The Button component variant to use. |
+| ToastTrigger | `toast_target` | String | | The target toast identifier to trigger. |
+
+Toast components require an `id` so that the dispatch event can call the component to display it.
## Components