closeLabel | LocalizedMessage | — | Accessible name of the close control. |
label | LocalizedMessage | — | 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. |
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. |
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. |