# Drawer, side panel

A container that slides from right side of the screen. Use for secondary tasks that require high focus but need to maintain the context of the main page.

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.drawer-side-panel.overview"
  source="components/dist/registries/dskit.json#drawer-side-panel"
  schema={1}
/>

<ComponentTabs component={"drawer-side-panel"} activeTab={"overview"} />

<div class="confidence-row">
  <span class="confidence-row__label">Confidence</span>
  <ConfidenceChip variant="medium" field="anatomy" value="medium" />
  <ConfidenceChip variant="high" field="variants" value="high" />
  <ConfidenceChip variant="high" field="motion" value="high" />
  <ConfidenceChip variant="high" field="a11y" value="high" />
  <ConfidenceChip variant="medium" field="content" value="medium" />
</div>

<MediaAsset src="/media/drawer-side-panel/preview.png" alt="" />

## Overview

A container that slides from right side of the screen. Use for secondary tasks that require high focus but need to maintain the context of the main page.

<h2 id="anatomy">Anatomy</h2>

<Anatomy parts={[{"name":"Trigger","description":"the element that opens the overlay; retains focus return on close"},{"name":"Surface","description":"the overlay panel itself — modal dialog, drawer, popover, tooltip"},{"name":"Scrim (optional)","description":"dimmed backdrop used for modals + drawers; absent for popovers/tooltips"},{"name":"Header (optional)","description":"title + close affordance for dismissible overlays"},{"name":"Body","description":"the overlay's primary content"},{"name":"Footer (optional)","description":"action affordances — confirm/cancel/close"},{"name":"Arrow or pointer (optional)","description":"anchors popovers/tooltips to their trigger"}]} />

<h2 id="variants">Variants</h2>

<VariantMatrix variantAxes={[{"axis":"App","values":["Studio","Explorer"]}]} />

<h2 id="motion">Motion</h2>

<MotionPattern resolvedPatterns={[{"ref":{"ref":"layered-overlays-modals","note":"modals fade + scale; scrim cross-fades"},"pattern":{"slug":"layered-overlays-modals","name":"Layered Overlays — Modals","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Modal scales 95%→100% while background scrim fades in. The slow duration communicates that the user has entered a new, temporary top-level context."},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-exit","Behavior":"Modal scales 100%→95% and fades 100%→0%. Scrim fades 100%→0%, synchronized. Slower on open to help users track context; dismisses quickly once the decision is made."}]}},{"ref":{"ref":"drawer-open-close","note":"drawer-side-panel slides on axis with easing per the drawer pattern"},"pattern":{"slug":"drawer-open-close","name":"Drawer (open/close)","phases":[{"Phase":"Open","Duration":"duration-slow","Easing":"ease-entrance","Behavior":"Slides in from the right"},{"Phase":"Close","Duration":"duration-base","Easing":"ease-exit","Behavior":"Slides out to the right"}]}},{"ref":{"ref":"anchor-motion","note":"popover/tooltip anchor open at the trigger with origin transform"},"pattern":{"slug":"anchor-motion","name":"The \"Anchor\" Motion — Dropdowns, Popovers, and Tooltips","phases":[{"Phase":"Open","Duration":"duration-base","Easing":"ease-entrance","Behavior":"Fades in (0→100% opacity) over full duration; element scales up from its trigger point while fading in"},{"Phase":"Close","Duration":"duration-fast","Easing":"ease-standard","Behavior":"Fades out (100→0% opacity) over full duration; element scales down and retracts back to its trigger point"}],"logic_and_accessibility":["Intentionality: Apply --zen-motion-delay-intent (300ms) for Tooltip opening on hover to prevent accidental triggers","Immediate Focus: Keyboard focus (Tab) ignores delays and triggers the open motion immediately","Reduced Motion: When prefers-reduced-motion: reduce is detected, fade transitions are disabled and elements toggle visibility instantly"]}}]} />

## Resources

- [Open in Figma](https://www.figma.com/file/l8biHxfarNi1I2RMvVxVOK?node-id=14294-5758)
- [Knowledge source](https://github.com/volivarii/actian-ds-knowledge/tree/main/components/src/drawer-side-panel)