Dialog
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.
The shell carries a 1px base.foreground border and no drop shadow at all, where the popovers and menus in this kit all sit on two stacked shadows. A modal arrives over a scrim, so it does not have to lift off the page to read as being in front of it. It also means the dialog looks the same on any background you drop it onto.
64 tall in base.sidebar with a 1px rule along the top, rather than sharing the white of the body. The actions sit on a shelf, which is what keeps a long dialog readable: you can scroll the body past the point where the buttons would otherwise float free.
The close cross is its own component
16 by 16 at radius 2, with a 12px cross inside it. It rests at 70% opacity and goes to full on hover, so the affordance is there without competing with the title next to it.
Its ring is drawn on the inside, where every other focus ring in the kit sits outside the shape. On a 16px box with a 12px cross that leaves the ring touching the glyph exactly. Focus also stays at 70% opacity rather than going to full like Hover, so a keyboard user sees a ring around a dimmed cross. Both are deliberate in the file rather than accidents, but they are the two places this control departs from the rest of the kit.
Three dialogs at three lengths
662 by 1420. All three are 384 wide and differ only in how much body they carry: 208, 312 and 472 tall. The copy is the file's.
The share sheet's Done button had been pushed to the left of its footer while the long read's Close sat on the right, so two dialogs with one action each disagreed about where that action goes. Done is now on the right with the rest of them.
Two components, five variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Dialog
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.
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.
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.
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.