closeLabel | LocalizedMessage | — | Accessible name of the close control. |
label | LocalizedMessage | DisplayValue | — | Accessible name of the drawer, such as "Incident details". The record's title is the header heading. |
loadingLabel | LocalizedMessage | — | Name of the pending state. It labels the skeletons and the boundary around the body. |
open | boolean | — | Whether the drawer is shown. The caller owns it; the drawer reports requests through onOpenChange. |
recordId | string | — | Id of the record to show. There is one drawer: changing this while it is open swaps the content in place and never
stacks a second drawer. With a dirty guard, the swap waits for the person's choice. |
title | LocalizedMessage | DisplayValue | — | The record's title, rendered as the header heading (h2). Required while loading, so the heading keeps its name. |
actions | ReactNode | — | The header action menu: an icon button that opens it. A text Edit control is not a header action. Close is closeLabel. |
children | ReactNode | — | The scrolling body. Compose {@link DetailDrawerSection } for detail sections. It may suspend or throw: the body sits
in a {@link LoadingBoundary }. |
error | LoadingBoundaryErrorSlot | — | ErrorBoundary props for the body. A throw while the body renders shows the recovery in place of the body, and a
new record id resets it. Omit it and the error propagates to the nearest outer boundary. |
footer | ReactNode | — | Footer actions at the inline end, below a divider. The primary action goes last. |
footerText | LocalizedMessage | — | Supporting text at the inline start of the footer. |
guard | DetailDrawerGuard | — | The unsaved-changes guard. Omit it and the drawer never asks. |
loading | boolean | — | Shows skeletons for the title and the body while the record loads. The drawer stays enabled, so the person can
still close it or move to another record. |
nav | ReactNode | — | A DrawerNav of the record's sections, such as Overview and History. It sits under the header and the record
strip, outside the scroll region, so it stays in view while the body scrolls. The caller owns the selected section
and renders that section's content as children. |
onOpenChange | ((open: boolean, details: DialogOpenChangeDetails) => void) | — | Called with the requested open state when the person presses the trigger or the close control, presses Escape, or
presses outside the drawer. A cancelable request is vetoed with details.cancel(). With a dirty
{@link DetailDrawerProps.guard}, set open to false as usual: the drawer keeps showing the record and asks first. |
onRecordChange | ((recordId: string, details: DetailDrawerRecordChangeDetails) => void) | — | Called with the id of the record the person chose in the record strip. |
placement | DrawerPlacement | DrawerPlacement.Viewport | Where the drawer is laid out: fixed to the viewport, over its nearest positioned ancestor, or in the flow beside the
content it describes (Drawer's placement, DD-21). |
records | readonly DetailDrawerRecord[] | — | Related records the person can move between. Keep the set small: each one is a segment. |
recordsLabel | LocalizedMessage | — | Accessible name of the strip, such as "Related incidents". |
ref | Ref<HTMLDialogElement> | — | Ref to the drawer's dialog panel, for a page that measures it, such as a table that reserves scroll room beside
an open drawer. |
resizeLabel | LocalizedMessage | — | Name of a resize handle on the drawer's inner edge. Set it and the drawer resizes between Small and Large. |
scrollable | boolean | true | When true, the body scrolls. Set it to false when children own their overflow, such as a list that loads more
as it scrolls, to avoid two scroll regions. The children then fill the body. |
scrollRegionLabel | LocalizedMessage | — | Name of the body's scroll region when it overflows with no focusable content and becomes focusable. |
subtitle | LocalizedMessage | DisplayValue | — | Supporting line under the title, such as status or location. |
trigger | DialogControlElement | — | The control that opens the drawer. Omit it for a drawer opened from elsewhere on the page. |