docs(toast): update

docs/content/3.components/toast.md

@@ -7,9 +7,6 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Toast.vue
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
@@ -26,22 +23,205 @@ You can check the `App` component `toaster` prop to see how to configure the Toa
 
 ### Title
 
+Pass a `title` field to the `toast.add` method to display a title.
+
+::component-example
+---
+options:
+  - name: 'title'
+    label: 'title'
+    default: 'Uh oh! Something went wrong.'
+name: 'toast-title-example'
+---
+::
+
 ### Description
 
+Pass a `description` field to the `toast.add` method to display a description.
+
+::component-example
+---
+options:
+  - name: 'title'
+    label: 'title'
+    default: 'Uh oh! Something went wrong.'
+  - name: 'description'
+    label: 'description'
+    default: 'There was a problem with your request.'
+name: 'toast-description-example'
+---
+::
+
 ### Icon
 
+Pass an `icon` field to the `toast.add` method to display an [Icon](/components/icon).
+
+::component-example
+---
+options:
+  - name: 'icon'
+    label: 'icon'
+    default: 'i-heroicons-wifi'
+name: 'toast-icon-example'
+---
+::
+
 ### Avatar
 
+Pass an `avatar` field to the `toast.add` method to display an [Avatar](/components/avatar).
+
+::component-example
+---
+options:
+  - name: 'avatar.src'
+    alias: 'avatar'
+    label: 'avatar.src'
+    default:
+      src: 'https://github.com/benjamincanac.png'
+name: 'toast-avatar-example'
+---
+::
+
 ### Color
 
-### Variant
+Pass a `color` field to the `toast.add` method to change the color of the Toast.
+
+::component-example
+---
+options:
+  - name: 'color'
+    label: 'color'
+    default: 'gray'
+    items:
+      - primary
+      - green
+      - red
+      - orange
+      - amber
+      - yellow
+      - lime
+      - emerald
+      - teal
+      - cyan
+      - sky
+      - blue
+      - indigo
+      - violet
+      - purple
+      - fuchsia
+      - pink
+      - rose
+      - gray
+name: 'toast-color-example'
+---
+::
 
 ### Close
 
+Pass a `close` field to customize or hide the close button (with `false` value).
+
+::component-example
+---
+name: 'toast-close-example'
+---
+::
+
+### Close Icon
+
+Pass a `closeIcon` field to customize the close button [Icon](/components/icon). Default to `i-heroicons-x-mark-20-solid`.
+
+::component-example
+---
+options:
+  - name: 'closeIcon'
+    label: 'closeIcon'
+    default: 'i-heroicons-arrow-right'
+name: 'toast-close-icon-example'
+---
+::
+
+::tip{to="/getting-started/icons#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
+::
+
 ### Actions
 
+Pass an `actions` field to add some [Button](/components/button) actions to the Alert.
+
+::component-example
+---
+options:
+  - name: 'description'
+    label: 'description'
+    default: 'There was a problem with your request.'
+name: 'toast-actions-example'
+---
+::
+
+::note
+Actions renders differently when the description is not set. You can try to remove it.
+::
+
 ## Examples
 
+### Change global position
+
+Change the `toaster.position` prop on the [App](/components/app#props) component to change the position of the toasts.
+
+::component-example
+---
+prettier: true
+name: 'toast-example'
+---
+
+#options
+:toaster-position-example
+::
+
+::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.vue#L77"}
+In this example, we use the `AppConfig` to configure the `position` prop of the `Toaster` component globally.
+::
+
+### Change global duration
+
+Change the `toaster.duration` prop on the [App](/components/app#props) component to change the duration of the toasts.
+
+::component-example
+---
+prettier: true
+name: 'toast-example'
+---
+
+#options
+:toaster-duration-example
+::
+
+::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.vue#L77"}
+In this example, we use the `AppConfig` to configure the `duration` prop of the `Toaster` component globally.
+::
+
+### Stacked toasts
+
+Set the `toaster.expand` prop to `false` on the [App](/components/app#props) component to display stacked toasts.
+
+::tip
+You can hover over the toasts to expand them. This will also pause the timer of the toasts.
+::
+
+::component-example
+---
+prettier: true
+name: 'toast-example'
+---
+
+#options
+:toaster-expand-example
+::
+
+::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.vue#L77"}
+In this example, we use the `AppConfig` to configure the `expand` prop of the `Toaster` component globally.
+::
+
 ## API
 
 ### Props