Drawer

Overlays · Badge, Drawer, StatTile, Tabs

Right-side sheet for a record's details, sliding in over the page.

Props: title, subtitle, avatar (name for an Avatar), onClose, width, inline (render inside a positioned container, for previews), children.

Use for a record you look at without leaving the list: a customer, an invoice, a run.
Traps keyboard focus, closes on Esc and backdrop click, returns focus to the opener.
Put Tabs right under the badges when the record has more than one view.

PreviewCode

Props

Badge

Prop	Type	Notes
`tone?`	`Tone`
`dot?`	`boolean`
`live?`	`boolean`
`children?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Drawer

Prop	Type	Notes
`title`	`string`	Required
`subtitle?`	`ReactNode`
`avatar?`	`string`
`onClose?`	`() => void`
`width?`	`number \| string`
`inline?`	`boolean`
`children?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

StatTile

Prop	Type	Notes
`value`	`ReactNode`	Required
`label`	`string`	Required
`tint?`	`Tint \| "surface" \| "placeholder"`
`delta?`	`string`
`delay?`	`number`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Tabs

Prop	Type	Notes
`items`	`string[]`	Required
`value?`	`string`
`defaultValue?`	`string`
`onChange?`	`(v: string) => void`
`block?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.