Dialog
The one dialog frame for both devices: a fixed heading with ×, a scrolling body with a persistent scrollbar, and a footer only when there is a decision.
Consumer provides: title (and optional subtitle), body content, footer actions (or none), width class.
Anatomy
- Frame:
surface, 2 dpink(stroke-frame),radius-md. No scrim, shadow or dim layer — the heavier line separates it from the page. - Heading: title + optional
mutedsubtitle, × IconButton on the trailing edge. Divider under it only when the body scrolls. - Body: scrolls; persistent Scrollbar.
- Footer: only for decisions; actions trailing, Cancel (outlined) before the primary. Divider above it only when the body scrolls.
Sizes
| Tablet | Phone | |
|---|---|---|
| Pickers, confirmations | dialog-narrow 400 dp, centred |
confirmations: centred 343 dp dialog with the 2 dp frame; pickers: BottomSheet |
| Default | dialog-standard 560 dp, centred |
BottomSheet |
| Editors | dialog-editor 720 dp, capped at width − 48 |
BottomSheet |
| Lists (Meeting notes, Topics), Settings | 560 × 800 dp, search and count in the heading | BottomSheet |
Tablet padding: heading 24 / 24 / 16, body 16 top · 24 start · 32 end, footer 16 / 24 / 24; title tablet-title.
Rules
- ×, system Back and tapping outside dismiss. With Cancel + Save, all three act as Cancel.
- No footer and no "Close" button on dialogs with nothing to confirm (Settings, libraries, About).
- Confirmations have no ×: the choice is the footer. Title names the thing; body names the consequence.
- Size to content: pickers never use the default width.
In the app
InkPopover is the frame; InkDialog adds the heading, body and footer.
- Size classes (
DialogSize): Confirmation and Narrow 400 dp, Standard 560 dp, Editor 720 dp, List 560 × 800 dp fixed height. - Tablet: every size is capped at the screen width − 48 dp. (Phone sizes are full-width sheets; see BottomSheet.)
- The tablet frame has no window animation.
- On the phone, every size except Confirmation is a BottomSheet.
- Phone confirmations are centred 343 dp dialogs with the 2 dp frame and no scrim.
- Every dialog window (
StaticDialogWindow) keeps the status bar hidden like the activity, so an editor never shifts under a dialog. - Phone heading: at least 64 dp tall, title in Title Large.
- The 48 dp × acts exactly like Cancel, as do Back and outside taps.
- Phone body padding: 8 dp top · 16 dp start · 24 dp end, including the scrollbar lane.
- Confirmations (
MessageDialog): Cancel, then the confirm action, filled red when destructive. - Custom popovers with lazy lists use
InkDialogHeadingfor the same heading.
Preview
Tablet · centred, 560 dp (drawn at 1:1 dp, here 480)
Add reminder
When
Confirmation (both devices)
Delete “kubernetes”?
Its 1 page of writing will be permanently deleted. This can’t be undone.