i

Side panel

Interrupting and annotating · researched

A panel that slides in from a screen edge to show details or a task without leaving the page.

organism · also called Drawer, Sheet · contains heading, button-group

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Drawer native: no antd 6.6.5
Variants
—
Sizes
default, large
States documented
default, loading
Accessibility guidance
no

Panel is a div with role=dialog (rc-drawer), not the native dialog element. Placement top/right/bottom/left; size also accepts a number or string.

docs ↗ · code ↗

Carbon

absentCarbon does not ship this component. Nothing is drawn in its place.

Not in the docs component list (components.json), the carbon-website components pages, the patterns pages, or the installed 1.117.0 package. packages/react/src/components on main has SidePanel and Tearsheet, but SidePanel.mdx says migrated components are not in the published v11 package and its pattern link returns 404.

· code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked the Components index (https://design-system.service.gov.uk/components/), the Patterns index (https://design-system.service.gov.uk/patterns/), the Styles index (https://design-system.service.gov.uk/styles/) and the repo components directory (alphagov/govuk-frontend packages/govuk-frontend/src/govuk/components, plus installed 6.5.1 dist). No drawer, sheet or slide-in panel. The Panel component is a static confirmation/interruption block, not a layer.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. Roadmap lists Navigation drawer and Bottom sheet as unbuilt. Source exists as undocumented experimental code in labs/navigationdrawer (navigation-drawer, navigation-drawer-modal) with no page in docs/components, so it is not counted as shipped.

Primer

Dialog variant native: no @primer/react 38.40.1
Variants
—
Sizes
—
States documented
—
Accessibility guidance
yes

No standalone drawer. Dialog takes a position prop (center, left, right, bottom, fullscreen, per-viewport) and the docs show a 'Side sheet (right)' and a bottom-sheet example. Renders a div with role=dialog and aria-modal, not the native dialog element.

docs ↗ · code ↗

Spectrum

Tray contested native: no @spectrum-web-components/button 1.12.4
Variants
—
Sizes
—
States documented
—
Accessibility guidance
yes

No Drawer anywhere; Tray (SWC 1st-gen sp-tray, also spectrum-css tray) is a modal panel sliding up from the bottom edge, described as mainly for mobile or smaller screens, so the match is contested. Native check: sp-tray renders divs and slots (plus a visually hidden button), opened via the Overlay API, not a dialog element; the design site has only a design-only Standard panel (docked or floating panel) and a Takeover dialog.

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

No drawer, sheet or off-canvas panel. Checked the docs components index (47 components, v3.14.0), a text search of the fetched component pages, and the 88 entries of packages/ on the develop branch.

Platform facts

Native elementdialogNo drawer element, role or APG pattern exists (0 occurrences of 'drawer' in the HTML Living Standard; none in APG index). The nearest native host is the dialog element: spec attributes closedby and open; shown modally via showModal() or non-modally via show(); MDN dialog page: commands show-modal, close; ::backdrop for modal. A popover (popover attribute with popovertarget) is the non-modal alternative; MDN Popover API page: popovers are always non-modal and 'a dialog element is the right way' to get a modal one. Sliding from an edge is CSS and is not in any source read. The mapping is an inference, not a source claim.
Baseline—
APG patterndialog-modal
ARIA roledialog
Shipped by3 of 7 systems

Anatomy

  1. dialog — If built on a modal dialog: APG Dialog (Modal) names the dialog container (role dialog) with a visible title and a close control; 'strongly recommended' that the tab sequence include a visible element with role button that closes the dialog.
  2. title — APG: aria-labelledby refers to a visible dialog title, or aria-label.
  3. close button optional — APG dialog: strongly recommended visible close control (close icon or cancel button).
  4. backdrop optional — MDN dialog: the ::backdrop pseudo-element for modal dialogs.

The seven states

default Closed (hidden) or open.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Inference: applies only if the drawer is built on a modal dialog. APG Dialog (Modal): when a dialog opens, focus moves to an element inside the dialog.
active n/a — Not defined.
disabled n/a — A drawer is a container; the invoking button can be disabled but no drawer state is defined.
error n/a — Not defined.
loading n/a — Not defined by HTML or APG.

Every cell was read twice, the second time from raw sources by a separate pass. 0 of 35 fields changed on the second read.