docs: improve notification page

docs/content/6.overlays/6.notification.md

@@ -19,6 +19,19 @@ First of all, add the `Notifications` component to your app, preferably inside `
 </template>
 ```
 
+This component will render the notifications at the bottom right of the screen by default. You can configure its behavior in the `app.config.ts` through `ui.notifications`:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    notifications: {
+      // Show toasts at the top right of the screen
+      position: 'top-0 right-0'
+    }
+  }
+})
+```
+
 Then, you can use the `useToast` composable to add notifications to your app:
 
 ::component-example
@@ -36,19 +49,46 @@ const toast = useToast()
 ```
 ::
 
-This component will render by default the notifications at the bottom right of the screen. You can configure its behavior in the `app.config.ts` through `ui.notifications`:
+When using `toast.add`, this will push a new notification to the stack displayed in `<UNotifications />`. All the props of the `Notification` component can be passed to `toast.add`.
 
-```ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    notifications: {
-      // Show toasts at the top right of the screen
-      position: 'top-0 right-0'
-    }
-  }
+```vue
+<script setup>
+const toast = useToast()
+
+onMounted(() => {
+  toast.add({
+    id: 'update_downloaded',
+    title: 'Update downloaded.',
+    description: 'It will be installed on restart. Restart now?',
+    icon: 'i-octicon-desktop-download-24',
+    timeout: 0,
+    actions: [{
+      label: 'Restart',
+      click: () => {
+
+      }
+    }]
+  })
 })
+</script>
 ```
 
+You can also use the `Notification` component directly in your app as an alert for example.
+
+### Title
+
+Pass a `title` to your Notification.
+
+::component-card
+---
+baseProps:
+  id: 1
+  timeout: 0
+props:
+  title: 'Notification'
+---
+::
+
 ### Description
 
 You can add a `description` in addition of the `title`.
@@ -58,8 +98,8 @@ You can add a `description` in addition of the `title`.
 baseProps:
   id: 2
   timeout: 0
-props:
   title: 'Notification'
+props:
   description: 'This is a notification.'
 ---
 ::
@@ -125,7 +165,7 @@ Use the `color` prop to change the progress and icon color of the Notification.
 ::component-card
 ---
 baseProps:
-  id: 5
+  id: 6
   title: 'Notification'
   description: 'This is a notification.'
   timeout: 600000
@@ -194,7 +234,7 @@ You can pass all the props of the [Button](/elements/button) component to custom
 ::component-card
 ---
 baseProps:
-  id: 6
+  id: 7
   title: 'Notification'
   timeout: 0
 props:
@@ -235,7 +275,7 @@ Like for `closeButton`, you can pass all the props of the [Button](/elements/but
 ::component-card
 ---
 baseProps:
-  id: 6
+  id: 8
   title: 'Notification'
   timeout: 0
 props:
@@ -256,7 +296,7 @@ Actions will render differently whether you have a `description` set.
 ::component-card
 ---
 baseProps:
-  id: 6
+  id: 9
   title: 'Notification'
   description: 'This is a notification.'
   timeout: 0