Skip to content
Twentyfirst UIPro

Drawer

Overlays · Badge, Drawer, StatTile, Tabs

View as Markdown

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.

Props

Badge

PropTypeNotes
tone?Tone
dot?boolean
live?boolean
children?ReactNode
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Drawer

PropTypeNotes
titlestringRequired
subtitle?ReactNode
avatar?string
onClose?() => void
width?number | string
inline?boolean
children?ReactNode
open?booleanOptional: with `open` the component stays mounted while it animates out; without it, render it only while open.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

StatTile

PropTypeNotes
valueReactNodeRequired
labelstringRequired
tint?Tint | "surface" | "placeholder"
delta?string
delay?number
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Tabs

PropTypeNotes
itemsstring[]Required
value?string
defaultValue?string
onChange?(v: string) => void
block?boolean
panels?Record<string, ReactNode>Content per tab; renders the tab panels under the bar, wired with tab/tabpanel roles.
label?stringAccessible name of the tab list.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.