diff --git a/docs/src/pages/components/Toggle.svx b/docs/src/pages/components/Toggle.svx
index 1b2b8e47..a2ff3a1e 100644
--- a/docs/src/pages/components/Toggle.svx
+++ b/docs/src/pages/components/Toggle.svx
@@ -7,35 +7,47 @@ components: ["Toggle", "ToggleSkeleton"]
import Preview from "../../components/Preview.svelte";
+`Toggle` provides a switch-like control that allows users to turn options on or off. It supports custom labels, different sizes, and various states to match your application's needs.
+
## Default (untoggled)
+Display a basic toggle with a label.
+
## Toggled
+Set `toggled` to `true` to display the toggle in its on state.
+
## Reactive example
+Use two-way binding to control the toggle state programmatically.
+
## on:toggle event
+Listen for toggle state changes using the `on:toggle` event.
+
console.log(e.detail)} />
## Hidden label text
-Set `hideLabel` to `true` to visually hide the label text. It's recommended to still specify `labelText` for screen reader accessibility.
+Set `hideLabel` to `true` to visually hide the label while maintaining accessibility.
## Custom labels
+Customize the toggle labels using `labelA` and `labelB` props.
+
## Slottable labels
-An alternative to the "labelA" and "labelB" props is to use the corresponding named slots.
+Use slots to customize the toggle labels with additional styling or content.
No
@@ -44,16 +56,24 @@ An alternative to the "labelA" and "labelB" props is to use the corresponding na
## Disabled state
+Set `disabled` to `true` to prevent user interaction.
+
## Small size
+Use the small size variant by setting `size` to `"sm"`.
+
## Skeleton
+Display a loading state using the skeleton component.
+
## Skeleton (small)
+Use the small size variant for the skeleton component.
+
\ No newline at end of file