Dialog
One modal task — and one component, because an alert and a confirmation are a prop and two buttons.
Loading documentation…
Powered by heyo
A dialog is a modal task: it locks the page because it demands an answer.
That is also the only thing in heyo-ui that does, besides
Sheet.
There is one Dialog, not three. dismissible={false} covers what used to be
AlertDialog, and a confirmation is a dialog with two buttons in its footer —
there is nothing left for a ConfirmDialog to add.
Two buttons in the footer, the destructive one on the right. Nothing else is needed, and nothing else should be there.
dismissible={false} is the old "alert dialog": the backdrop and Escape stop
closing it, so the reader has to answer. Use it only when dismissing would lose
work or leave something half-done — everything else should be dismissible.
sm, base, lg and xl. The body scrolls on its own, so the header and
footer stay put however long the content gets — and the corner close button
sits above a scrolled body rather than under it.
Use a Sheet when the content is a detail pane or a
filter panel — something you look at beside the page rather than instead of
it.
Whether clicking the backdrop or pressing Escape closes the dialog. It
defaults to true.
Controlled and uncontrolled state.
Fires on open and close.
Maximum width. It defaults to base.
Hides the built-in corner close button. Only sensible when the footer has one.
Anything that opens the dialog.
The heading block. Title and Description are wired to the dialog's
accessible name and description.
The scrolling content column.
Right-aligned actions.
Closes the dialog. Pass render={<Button />} for a footer button.
The corner dismiss, rendered for you unless hideClose is set.