diff --git a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
index 80bde9636b9..638b0716af3 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/_index.module.css
@@ -87,6 +87,7 @@
 
 .Title {
   margin: 0;
+  padding-right: 2rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
@@ -103,6 +104,83 @@
   }
 }
 
+.Link {
+  align-self: flex-start;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: oklch(14.5% 0 0deg);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.16em;
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: 2px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+}
+
+.Close {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+}
+
 .Container {
   display: flex;
   gap: 8px;
@@ -182,3 +260,72 @@
     }
   }
 }
+
+.IconButton {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  -webkit-user-select: none;
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-pressed] {
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &[data-disabled] {
+    color: oklch(55.6% 0 0deg);
+    border-color: oklch(55.6% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(70.8% 0 0deg);
+      border-color: oklch(70.8% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
index 7e1dcc7aa85..f37ffc23964 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/css-modules/index.tsx
@@ -51,10 +51,16 @@ export default function PopoverDetachedTriggersControlledDemo() {
           <Popover.Positioner className={styles.Positioner} sideOffset={8}>
             <Popover.Popup className={styles.Popup}>
               <Popover.Arrow className={styles.Arrow} />
-              <Popover.Title className={styles.Title}>Notifications</Popover.Title>
+              <Popover.Title className={styles.Title}>Free shipping</Popover.Title>
               <Popover.Description className={styles.Description}>
-                You are all caught up. Good job!
+                Orders over $50 arrive in 3–5 business days at no extra cost.
               </Popover.Description>
+              <a href="#" className={styles.Link}>
+                View shipping policy
+              </a>
+              <Popover.Close aria-label="Close" className={styles.Close}>
+                <XIcon />
+              </Popover.Close>
             </Popover.Popup>
           </Popover.Positioner>
         </Popover.Portal>
@@ -62,3 +68,21 @@ export default function PopoverDetachedTriggersControlledDemo() {
     </React.Fragment>
   );
 }
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
index 7dac976f0aa..06de4fa80c6 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-controlled/tailwind/index.tsx
@@ -56,10 +56,22 @@ export default function PopoverDetachedTriggersControlledDemo() {
           >
             <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
-              <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+              <Popover.Title className="pr-8 text-sm font-bold">Free shipping</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-                You are all caught up. Good job!
+                Orders over $50 arrive in 3–5 business days at no extra cost.
               </Popover.Description>
+              <a
+                href="#"
+                className="self-start text-sm text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+              >
+                View shipping policy
+              </a>
+              <Popover.Close
+                aria-label="Close"
+                className="absolute top-2 right-2 flex size-7 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+              >
+                <XIcon />
+              </Popover.Close>
             </Popover.Popup>
           </Popover.Positioner>
         </Popover.Portal>
@@ -67,3 +79,21 @@ export default function PopoverDetachedTriggersControlledDemo() {
     </React.Fragment>
   );
 }
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
index 0aa024ce36a..6bffe1fdce4 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.module.css
@@ -156,6 +156,7 @@
 
 .Title {
   margin: 0;
+  padding-right: 2rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
@@ -172,6 +173,54 @@
   }
 }
 
+.Close {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+}
+
 .Container {
   display: flex;
   gap: 0.5rem;
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
index 5d9a169b03d..cb6958dec2e 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/css-modules/index.tsx
@@ -9,16 +9,12 @@ const demoPopover = Popover.createHandle<React.ComponentType>();
 export default function PopoverDetachedTriggersFullDemo() {
   return (
     <div className={styles.Container}>
-      <Popover.Trigger
-        className={baseStyles.Button}
-        handle={demoPopover}
-        payload={NotificationsPanel}
-      >
-        Notifications
+      <Popover.Trigger className={baseStyles.Button} handle={demoPopover} payload={ShippingPanel}>
+        Shipping
       </Popover.Trigger>
 
-      <Popover.Trigger className={baseStyles.Button} handle={demoPopover} payload={ActivityPanel}>
-        Activity
+      <Popover.Trigger className={baseStyles.Button} handle={demoPopover} payload={ReturnsPanel}>
+        Returns
       </Popover.Trigger>
 
       <Popover.Trigger className={baseStyles.Button} handle={demoPopover} payload={ProfilePanel}>
@@ -35,6 +31,10 @@ export default function PopoverDetachedTriggersFullDemo() {
                 <Popover.Viewport className={styles.Viewport}>
                   {Payload !== undefined && <Payload />}
                 </Popover.Viewport>
+
+                <Popover.Close aria-label="Close" className={styles.Close}>
+                  <XIcon />
+                </Popover.Close>
               </Popover.Popup>
             </Popover.Positioner>
           </Popover.Portal>
@@ -44,12 +44,12 @@ export default function PopoverDetachedTriggersFullDemo() {
   );
 }
 
-function NotificationsPanel() {
+function ShippingPanel() {
   return (
     <div className={styles.Stack}>
-      <Popover.Title className={styles.Title}>Notifications</Popover.Title>
+      <Popover.Title className={styles.Title}>Free shipping</Popover.Title>
       <Popover.Description className={styles.Description}>
-        You are all caught up. Good job!
+        Orders over $50 arrive in 3–5 business days at no extra cost.
       </Popover.Description>
     </div>
   );
@@ -75,13 +75,31 @@ function ProfilePanel() {
   );
 }
 
-function ActivityPanel() {
+function ReturnsPanel() {
   return (
     <div className={styles.Stack}>
-      <Popover.Title className={styles.Title}>Activity</Popover.Title>
+      <Popover.Title className={styles.Title}>Free returns</Popover.Title>
       <Popover.Description className={styles.Description}>
-        Nothing interesting happened recently.
+        Return any item within 30 days for a full refund.
       </Popover.Description>
     </div>
   );
 }
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
index 2d5dc1511c2..af0946eb5ba 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-full/tailwind/index.tsx
@@ -10,16 +10,12 @@ const triggerClassName =
 export default function PopoverDetachedTriggersFullDemo() {
   return (
     <div className="flex gap-2">
-      <Popover.Trigger
-        className={triggerClassName}
-        handle={demoPopover}
-        payload={NotificationsPanel}
-      >
-        Notifications
+      <Popover.Trigger className={triggerClassName} handle={demoPopover} payload={ShippingPanel}>
+        Shipping
       </Popover.Trigger>
 
-      <Popover.Trigger className={triggerClassName} handle={demoPopover} payload={ActivityPanel}>
-        Activity
+      <Popover.Trigger className={triggerClassName} handle={demoPopover} payload={ReturnsPanel}>
+        Returns
       </Popover.Trigger>
 
       <Popover.Trigger className={triggerClassName} handle={demoPopover} payload={ProfilePanel}>
@@ -62,6 +58,13 @@ export default function PopoverDetachedTriggersFullDemo() {
                 >
                   {Payload !== undefined && <Payload />}
                 </Popover.Viewport>
+
+                <Popover.Close
+                  aria-label="Close"
+                  className="absolute top-1 right-1 flex size-7 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+                >
+                  <XIcon />
+                </Popover.Close>
               </Popover.Popup>
             </Popover.Positioner>
           </Popover.Portal>
@@ -71,12 +74,12 @@ export default function PopoverDetachedTriggersFullDemo() {
   );
 }
 
-function NotificationsPanel() {
+function ShippingPanel() {
   return (
     <div className="flex flex-col gap-1">
-      <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+      <Popover.Title className="pr-8 text-sm font-bold">Free shipping</Popover.Title>
       <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-        You are all caught up. Good job!
+        Orders over $50 arrive in 3–5 business days at no extra cost.
       </Popover.Description>
     </div>
   );
@@ -85,7 +88,7 @@ function NotificationsPanel() {
 function ProfilePanel() {
   return (
     <div className="grid w-max grid-cols-[auto_auto] gap-x-2">
-      <Popover.Title className="col-start-2 col-end-3 row-start-1 row-end-2 text-sm font-bold">
+      <Popover.Title className="col-start-2 col-end-3 row-start-1 row-end-2 pr-8 text-sm font-bold">
         Jason Eventon
       </Popover.Title>
       <img
@@ -116,13 +119,31 @@ function ProfilePanel() {
   );
 }
 
-function ActivityPanel() {
+function ReturnsPanel() {
   return (
     <div className="flex flex-col gap-1">
-      <Popover.Title className="text-sm font-bold">Activity</Popover.Title>
+      <Popover.Title className="pr-8 text-sm font-bold">Free returns</Popover.Title>
       <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-        Nothing interesting happened recently.
+        Return any item within 30 days for a full refund.
       </Popover.Description>
     </div>
   );
 }
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
index 9fab34c29d4..5576a19b880 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/css-modules/index.tsx
@@ -8,8 +8,12 @@ const demoPopover = Popover.createHandle();
 export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
-      <Popover.Trigger className={styles.Button} handle={demoPopover}>
-        Notifications
+      <Popover.Trigger
+        className={styles.IconButton}
+        handle={demoPopover}
+        aria-label="Shipping information"
+      >
+        <InfoIcon />
       </Popover.Trigger>
 
       <Popover.Root handle={demoPopover}>
@@ -17,10 +21,16 @@ export default function PopoverDetachedTriggersSimpleDemo() {
           <Popover.Positioner sideOffset={8}>
             <Popover.Popup className={styles.Popup}>
               <Popover.Arrow className={styles.Arrow} />
-              <Popover.Title className={styles.Title}>Notifications</Popover.Title>
+              <Popover.Title className={styles.Title}>Free shipping</Popover.Title>
               <Popover.Description className={styles.Description}>
-                You are all caught up. Good job!
+                Orders over $50 arrive in 3–5 business days at no extra cost.
               </Popover.Description>
+              <a href="#" className={styles.Link}>
+                View shipping policy
+              </a>
+              <Popover.Close aria-label="Close" className={styles.Close}>
+                <XIcon />
+              </Popover.Close>
             </Popover.Popup>
           </Popover.Positioner>
         </Popover.Portal>
@@ -28,3 +38,41 @@ export default function PopoverDetachedTriggersSimpleDemo() {
     </React.Fragment>
   );
 }
+
+function InfoIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <circle cx="8" cy="8" r="6.5" />
+      <path d="M8 7.5v3.5" />
+      <circle cx="8" cy="5" r="0.75" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
index 0b3fdd504a8..41a9583eaff 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/detached-triggers-simple/tailwind/index.tsx
@@ -5,13 +5,17 @@ import { Popover } from '@base-ui/react/popover';
 const demoPopover = Popover.createHandle();
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-pressed:bg-neutral-100 dark:data-pressed:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+  'flex size-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-pressed:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-pressed:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function PopoverDetachedTriggersSimpleDemo() {
   return (
     <React.Fragment>
-      <Popover.Trigger className={triggerClassName} handle={demoPopover}>
-        Notifications
+      <Popover.Trigger
+        className={triggerClassName}
+        handle={demoPopover}
+        aria-label="Shipping information"
+      >
+        <InfoIcon />
       </Popover.Trigger>
 
       <Popover.Root handle={demoPopover}>
@@ -19,10 +23,22 @@ export default function PopoverDetachedTriggersSimpleDemo() {
           <Popover.Positioner sideOffset={8}>
             <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
               <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
-              <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+              <Popover.Title className="pr-8 text-sm font-bold">Free shipping</Popover.Title>
               <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-                You are all caught up. Good job!
+                Orders over $50 arrive in 3–5 business days at no extra cost.
               </Popover.Description>
+              <a
+                href="#"
+                className="self-start text-sm text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+              >
+                View shipping policy
+              </a>
+              <Popover.Close
+                aria-label="Close"
+                className="absolute top-2 right-2 flex size-7 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+              >
+                <XIcon />
+              </Popover.Close>
             </Popover.Popup>
           </Popover.Positioner>
         </Popover.Portal>
@@ -30,3 +46,41 @@ export default function PopoverDetachedTriggersSimpleDemo() {
     </React.Fragment>
   );
 }
+
+function InfoIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <circle cx="8" cy="8" r="6.5" />
+      <path d="M8 7.5v3.5" />
+      <circle cx="8" cy="5" r="0.75" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
index 018ef215f44..9263284ee94 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/css-modules/index.tsx
@@ -5,18 +5,64 @@ import styles from '../../_index.module.css';
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger className={styles.Button}>Notifications</Popover.Trigger>
+      <Popover.Trigger className={styles.IconButton} aria-label="Shipping information">
+        <InfoIcon />
+      </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
           <Popover.Popup className={styles.Popup}>
             <Popover.Arrow className={styles.Arrow} />
-            <Popover.Title className={styles.Title}>Notifications</Popover.Title>
+            <Popover.Title className={styles.Title}>Free shipping</Popover.Title>
             <Popover.Description className={styles.Description}>
-              You are all caught up. Good job!
+              Orders over $50 arrive in 3–5 business days at no extra cost.
             </Popover.Description>
+            <a href="#" className={styles.Link}>
+              View shipping policy
+            </a>
+            <Popover.Close aria-label="Close" className={styles.Close}>
+              <XIcon />
+            </Popover.Close>
           </Popover.Popup>
         </Popover.Positioner>
       </Popover.Portal>
     </Popover.Root>
   );
 }
+
+function InfoIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <circle cx="8" cy="8" r="6.5" />
+      <path d="M8 7.5v3.5" />
+      <circle cx="8" cy="5" r="0.75" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
index 64d3e0fe39d..b407a756838 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/hero/tailwind/index.tsx
@@ -1,23 +1,76 @@
+import * as React from 'react';
 import { Popover } from '@base-ui/react/popover';
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-pressed:bg-neutral-100 dark:data-pressed:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+  'flex size-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-pressed:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-pressed:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger className={triggerClassName}>Notifications</Popover.Trigger>
+      <Popover.Trigger className={triggerClassName} aria-label="Shipping information">
+        <InfoIcon />
+      </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
           <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
-            <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+            <Popover.Title className="pr-8 text-sm font-bold">Free shipping</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-              You are all caught up. Good job!
+              Orders over $50 arrive in 3–5 business days at no extra cost.
             </Popover.Description>
+            <a
+              href="#"
+              className="self-start text-sm text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+            >
+              View shipping policy
+            </a>
+            <Popover.Close
+              aria-label="Close"
+              className="absolute top-2 right-2 flex size-7 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+            >
+              <XIcon />
+            </Popover.Close>
           </Popover.Popup>
         </Popover.Positioner>
       </Popover.Portal>
     </Popover.Root>
   );
 }
+
+function InfoIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <circle cx="8" cy="8" r="6.5" />
+      <path d="M8 7.5v3.5" />
+      <circle cx="8" cy="5" r="0.75" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
index 7e2c8c72e05..a01a720e1e9 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/css-modules/index.tsx
@@ -5,20 +5,64 @@ import styles from '../../_index.module.css';
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger openOnHover className={styles.Button}>
-        Notifications
+      <Popover.Trigger openOnHover className={styles.IconButton} aria-label="Shipping information">
+        <InfoIcon />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
           <Popover.Popup className={styles.Popup}>
             <Popover.Arrow className={styles.Arrow} />
-            <Popover.Title className={styles.Title}>Notifications</Popover.Title>
+            <Popover.Title className={styles.Title}>Free shipping</Popover.Title>
             <Popover.Description className={styles.Description}>
-              You are all caught up. Good job!
+              Orders over $50 arrive in 3–5 business days at no extra cost.
             </Popover.Description>
+            <a href="#" className={styles.Link}>
+              View shipping policy
+            </a>
+            <Popover.Close aria-label="Close" className={styles.Close}>
+              <XIcon />
+            </Popover.Close>
           </Popover.Popup>
         </Popover.Positioner>
       </Popover.Portal>
     </Popover.Root>
   );
 }
+
+function InfoIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <circle cx="8" cy="8" r="6.5" />
+      <path d="M8 7.5v3.5" />
+      <circle cx="8" cy="5" r="0.75" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
index 893b165d104..458a1ab9389 100644
--- a/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/popover/demos/open-on-hover/tailwind/index.tsx
@@ -1,25 +1,76 @@
+import * as React from 'react';
 import { Popover } from '@base-ui/react/popover';
 
 const triggerClassName =
-  'flex h-8 items-center justify-center border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm font-normal whitespace-nowrap text-neutral-950 dark:text-white select-none hover:not-data-disabled:bg-neutral-100 dark:hover:not-data-disabled:bg-neutral-800 active:not-data-disabled:bg-neutral-200 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 data-pressed:bg-neutral-100 dark:data-pressed:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
+  'flex size-8 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-pressed:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:data-pressed:bg-neutral-800 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white';
 
 export default function ExamplePopover() {
   return (
     <Popover.Root>
-      <Popover.Trigger openOnHover className={triggerClassName}>
-        Notifications
+      <Popover.Trigger openOnHover className={triggerClassName} aria-label="Shipping information">
+        <InfoIcon />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner sideOffset={8}>
           <Popover.Popup className="relative flex h-[var(--popup-height,auto)] w-[var(--popup-width,auto)] max-w-[500px] flex-col gap-1 origin-[var(--transform-origin)] bg-white dark:bg-neutral-950 p-3 text-neutral-950 dark:text-white outline-none border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0] shadow-black/12 dark:shadow-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0">
             <Popover.Arrow className="relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-white dark:before:bg-neutral-950 before:border before:border-neutral-950 dark:before:border-white before:[transform:translate(-50%,50%)_rotate(45deg)]" />
-            <Popover.Title className="text-sm font-bold">Notifications</Popover.Title>
+            <Popover.Title className="pr-8 text-sm font-bold">Free shipping</Popover.Title>
             <Popover.Description className="text-sm text-neutral-600 dark:text-neutral-400">
-              You are all caught up. Good job!
+              Orders over $50 arrive in 3–5 business days at no extra cost.
             </Popover.Description>
+            <a
+              href="#"
+              className="self-start text-sm text-neutral-950 dark:text-white underline underline-offset-[0.16em] decoration-[1px] hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+            >
+              View shipping policy
+            </a>
+            <Popover.Close
+              aria-label="Close"
+              className="absolute top-2 right-2 flex size-7 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:bg-neutral-200 dark:active:bg-neutral-700 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+            >
+              <XIcon />
+            </Popover.Close>
           </Popover.Popup>
         </Popover.Positioner>
       </Popover.Portal>
     </Popover.Root>
   );
 }
+
+function InfoIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <circle cx="8" cy="8" r="6.5" />
+      <path d="M8 7.5v3.5" />
+      <circle cx="8" cy="5" r="0.75" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+function XIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      {...props}
+      style={{ display: 'block', ...props.style }}
+    >
+      <path d="m4.5 4.5 7 7m-7 0 7-7" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(docs)/react/components/popover/page.mdx b/docs/src/app/(docs)/react/components/popover/page.mdx
index 98da7125ccd..c5efcaa5a3b 100644
--- a/docs/src/app/(docs)/react/components/popover/page.mdx
+++ b/docs/src/app/(docs)/react/components/popover/page.mdx
@@ -142,6 +142,9 @@ const demoPopover = Popover.createHandle<{ text: string }>();
               This has been opened by {payload.text} {/* @highlight-text "payload" */}
             </Popover.Description>
           )}
+          <Popover.Close aria-label="Close" className={styles.Close}>
+            <XIcon />
+          </Popover.Close>
         </Popover.Popup>
       </Popover.Positioner>
     </Popover.Portal>