FullscreenDialog
A dialog that takes the whole window for one big question and its answer.
import { FullscreenDialog } from "@butteryui/react";Demo
Asks: What do you need to get started? You can change this later.
When to use it
Use it for
- One question that deserves the whole screen, such as what someone needs at setup or how to start
- A choice with more tiles than a small dialog holds comfortably
Not for
- A short confirm: use Dialog
- A few fields to fill in: use FormDialog
- Spelling out what a yes costs: use ConsequenceDialog
Examples
Getting started
A setup question that takes the whole window, its answer kept only once it's saved.
Not set up yet
House roast
One big question from its trigger: a mark at the top start, the question and a quieter note, the answer, and Save.
No house roast yet
Pick a start
How a new menu starts, opened from code, with one choice as its answer.
No menu yet
Variants and states
A setup question
A strong question and a quieter note, then tiles to answer.
Props
FullscreenDialog
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | The control that opens it. Leave it out to open it from code with open. | |
open | boolean | Whether it's open. Pair with onOpenChange to control it. | |
defaultOpen | boolean | false | Whether it starts open when uncontrolled. Defaults to false. |
onOpenChange | ((open: boolean) => void) | Called when it opens or closes. | |
titlerequired | string | The question, the strong first part of the headline, such as "What do you need to get started?". | |
note | string | The headline's quieter second part, in the same line, such as "You can change this later." | |
logo | ReactNode | A mark at the top start, such as the app's own. | |
children | ReactNode | The answer, such as OptionTiles, under the headline. | |
actions | ReactNode | Buttons at the bottom end, such as Cancel and Save. | |
closeLabel | string | "Close" | Names the close button. Defaults to "Close". |
className | string | Classes for the dialog's content, the element that carries data-bt="FullscreenDialog". | |
style | CSSProperties | Inline styles for the same element. | |
ref | Ref<HTMLDivElement> | The dialog element. |
Accessibility
A modal dialog named by its whole headline. Focus moves to the dialog itself as it opens and, once it has settled, to the first control in it; it stays inside, and goes back to what opened it when it closes. Escape or the close button closes it.
| Keys | What they do |
|---|---|
| Escape | Closes it and puts focus back on what opened it |
| Tab or Shift+Tab | Moves through the answer, the actions and the close button, staying inside the dialog |
Motion
It appears with a `Presence` preset and leaves faster than it came, in about 60% of the time.
With reduced motion: It fades in and out with its scrim in 100ms instead of 120ms; it never grows or rises.
Layout
It fills the window less 16px on every side. Its mark and close button sit at the top, its actions at the bottom end, 32px in from 640px of width and 24px in under it; the headline, in title-lg, and the answer sit centered in a column at most 640px wide, the headline wrapping, and its content scrolls inside it when it's taller than the window.