Two components, five variants. A 384 by 216 shell with a header, a body and a footer shelf, and the close cross published on its own.
Two components, five variants
Dialog - Show Close Button: Yes · No - 384 × 216 either way
Dialog / Close Icon - State: Default · Hover · Focus - 16 × 16 at radius 2
Using the Dialog
Why is there no drop shadow?
The shell is bounded by a 1px base.foreground border and nothing else, where the popovers and menus in this kit all sit on two stacked shadows. A modal arrives over a scrim, so it does not need to lift off the page to read as being in front of it, and a border behaves the same on any background.
What is the footer made of?
Its own 64px shelf in base.sidebar with a 1px rule along the top, rather than sharing the white of the body. Actions sit on that shelf so a long dialog can scroll its body without the buttons floating loose.
Why is the close cross a separate component?
Because it has three states of its own and the dialog has none. Hiding it is an axis on the dialog; how it behaves once shown is the icon's business. It rests at 70% opacity and goes to full on hover so it does not compete with the title beside it.
What does the body placeholder mean?
It is a 352 by 60 frame in base.muted reading Remove this frame and add your content. It is scaffolding, not part of the component: delete it and drop your own body in, and the dialog reflows around whatever height that comes to. The three usage examples run 208, 312 and 472 tall for exactly that reason.