Overlays

Dialog

A centred, focused task that needs the person's full attention but is short: rename, choose a scope, connect an app. 480px wide, 15px radius.

Live specimen

Lifted from the approved family page at build time; interact with it.

Dialog

For a decision with a little content. Centred, 480 wide, footer actions right, primary last.

Navy birdseye two-piece suitUpdate ready · v4 from HQ
Update ready
UsesDialog.k-dialog.ov-dg-h.ov-dg-b.ov-dg-f--dialog-w--e-dialog

from families/overlays/#dialog

Focus while open

The order a keyboard user travels inside the sheet, and what happens at each edge.

ProductClothStatusRecommended priceVersion
Stone linen jacketIrish Linen
HS 30612Draft£690v1
Charcoal herringbone jacketPerennial
VBC 218.1003Available£780v2
Navy birdseye two-piece suitCrystal Springs
HS 81045Available£1,150v4
Midnight mohair dinner suitCeremony
VBC 150.2201Available£1,480v2
Navy chalk-stripe three-pieceRevenge
VBC 403.0118Available£1,390v3
Mid-grey flannel trousersSherry Flannel
HS 64033Draft£340v1
Brown glen check waistcoatMoorland Tweed
HS 92201Retired£260v5
Showing 1–7 of 214
Opens
Focus lands on the first thing you would change: the price here, the phrase box in a typed confirm, Keep editing in a guard.
Inside
Tab and Shift+Tab cycle through the layer only. The page behind is inert and the sheet edge carries a faint ring while it holds focus.
Leaves
Esc, the scrim or Cancel. With unsaved edits, the guard asks first.
Returns
Focus goes back to the Quick edit button on the row you came from.
Usesaria-modal.ov-trap--focus-ring--ring

from families/overlays/#focus