diff --git a/apps/ui/skills/coss/references/primitives/button.md b/apps/ui/skills/coss/references/primitives/button.md
index 4c0b5e0d4..825fd1e10 100644
--- a/apps/ui/skills/coss/references/primitives/button.md
+++ b/apps/ui/skills/coss/references/primitives/button.md
@@ -65,6 +65,25 @@ Button with icon and text (no opacity on the icon):
 
 Sizes: `xs`, `sm`, `default`, `lg`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`.
 
+### Loading state
+
+Built-in `loading` prop (disables and shows spinner automatically):
+
+```tsx
+<Button loading={isLoading} onClick={handleClick}>Submit</Button>
+```
+
+Composite approach (manual `Spinner` + `disabled`):
+
+```tsx
+<Button disabled>
+  <Spinner />
+  Loading...
+</Button>
+```
+
+Prefer the `loading` prop for typical async actions. Use the composite approach when you need custom spinner placement or label.
+
 ### More examples
 
 - default: `p-button-1`
@@ -85,4 +104,6 @@ Sizes: `xs`, `sm`, `default`, `lg`, `icon-xs`, `icon-sm`, `icon`, `icon-lg`.
 
 ## Useful particle references
 
-See particles `p-button-1` through `p-button-8` for all variant/size combinations.
+- variants/sizes: `p-button-1` through `p-button-8`
+- composite loading (Spinner + disabled): `p-button-18`
+- built-in loading prop: `p-button-41`
diff --git a/apps/ui/skills/coss/references/primitives/drawer.md b/apps/ui/skills/coss/references/primitives/drawer.md
index e5026634d..8a238736e 100644
--- a/apps/ui/skills/coss/references/primitives/drawer.md
+++ b/apps/ui/skills/coss/references/primitives/drawer.md
@@ -88,7 +88,7 @@ Drawer with handle:
     </DrawerPanel>
     <DrawerFooter>
       <Button>Save</Button>
-      <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
+      <DrawerClose render={<Button variant="ghost" />}>Cancel</DrawerClose>
     </DrawerFooter>
   </DrawerPopup>
 </Drawer>
diff --git a/apps/ui/skills/coss/references/primitives/sheet.md b/apps/ui/skills/coss/references/primitives/sheet.md
index 10fdec3e9..27899b2b9 100644
--- a/apps/ui/skills/coss/references/primitives/sheet.md
+++ b/apps/ui/skills/coss/references/primitives/sheet.md
@@ -81,7 +81,7 @@ Sheet from the right side with form:
       </Field>
     </SheetPanel>
     <SheetFooter>
-      <SheetClose render={<Button variant="outline" />}>Cancel</SheetClose>
+      <SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
       <Button>Save</Button>
     </SheetFooter>
   </SheetPopup>
diff --git a/apps/ui/skills/coss/references/rules/styling.md b/apps/ui/skills/coss/references/rules/styling.md
index 781242c8d..e65d8f4c1 100644
--- a/apps/ui/skills/coss/references/rules/styling.md
+++ b/apps/ui/skills/coss/references/rules/styling.md
@@ -21,6 +21,7 @@ Use this guide when writing or updating coss primitives, particles, and docs exa
 - Many primitives already define inner SVG sizing. Check existing component styles before adding icon `size-*` classes.
 - Many primitives already define inner SVG opacity (commonly around `opacity-80`). Check existing component styles before adding manual icon opacity classes.
 - Prefer data-slot-aware selectors and `in-*` patterns over `group` where available.
+- Cancel/close buttons in Dialog, AlertDialog, Sheet, and Drawer footers use `variant="ghost"`. Reserve `variant="outline"` for triggers that open overlays, not for dismissing them.
 
 ## Global Styling Setup (when relevant)