BoM Daily / design

components

Dialog

A modal built on Radix Dialog. Mobile-first: it presents as a bottom sheet with a drag affordance on small screens, and as a centered modal at 600px and up. Focus is trapped and the overlay closes it. Resize the window to see the two presentations.

Basic

A trigger opens the dialog; the footer holds the actions.

Props

PropTypeDefaultDescription
titlestringnoneRequired. The dialog heading (Radix Title).
descriptionstringnoneOptional supporting text (Radix Description).
triggerReactNodenoneElement that opens the dialog, rendered asChild.
footerReactNodenoneAction row, right-aligned.
openbooleannoneControlled open state.
onOpenChange(o: boolean) => voidnoneOpen-state handler.