diff --git a/docs/src/pages/components/InlineLoading.svx b/docs/src/pages/components/InlineLoading.svx
index 1677b675..be82a72c 100644
--- a/docs/src/pages/components/InlineLoading.svx
+++ b/docs/src/pages/components/InlineLoading.svx
@@ -1,18 +1,37 @@
+---
+components: ["InlineLoading"]
+---
+
 <script>
-  import { InlineLoading } from "carbon-components-svelte";
+  import { InlineLoading, UnorderedList, ListItem } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
+The `InlineLoading` component provides a compact loading indicator that can be embedded within content. It's ideal for showing progress during inline operations like form submissions or data updates.
+
 ## Default
 
+Display a basic loading indicator with the default configuration.
+
 <InlineLoading />
 
 ## With description
 
+Add a descriptive text to provide context about the loading operation.
+
 <InlineLoading description="Loading metrics..." />
 
 ## Status states
 
+The component supports different status states to indicate progress:
+
+<UnorderedList svx-ignore style="margin-bottom: var(--cds-spacing-08)">
+  <ListItem><strong>active</strong>: Shows an animated loading indicator</ListItem>
+  <ListItem><strong>inactive</strong>: Displays a static state</ListItem>
+  <ListItem><strong>finished</strong>: Shows a success state</ListItem>
+  <ListItem><strong>error</strong>: Displays an error state</ListItem>
+</UnorderedList>
+
 <InlineLoading status="active" description="Submitting..." />
 <InlineLoading status="inactive" description="Cancelling..." />
 <InlineLoading status="finished" description="Success" />
@@ -20,4 +39,6 @@
 
 ## UX example
 
+See how to integrate the loading indicator in a real-world scenario.
+
 <FileSource src="/framed/InlineLoading/InlineLoadingUx" />
\ No newline at end of file