Dialogs inform users about a required or critical task.
Dialogs appear over content to provide critical information or ask for a
decision. Dialogs disable all other functionality when they appear and remain on
screen until an action is taken by the user.
Dialogs must include at least one action button and no more than two.
Dialog with minimal text and one continue action
< State
initial = {{
show: false,
}}
>
{({ state, setState }) => (
<>
<Button onClick={() => setState({ show: true })}>
Open minimal dialog
</ Button>
<Dialog
show={state.show}
title="Minimal dialog here"
primaryCta={{
action: () => setState({ show: false }),
text: "Continue",
}}
/>
</>
)}
</ State> Copy
Dialog with some details about the action
< State
initial = {{
show: false,
}}
>
{({ state, setState }) => (
<>
<Button onClick={() => setState({ show: true })}>
Dialog with details
</ Button>
<Dialog
detail="This extra informaton is important."
show={state.show}
title="Dialog with details"
primaryCta={{
action: () => setState({ show: false }),
text: "Continue",
}}
/>
</>
)}
</ State> Copy
Dialog with additional call for action
< State
initial = {{
show: false,
}}
>
{({ state, setState }) => (
<>
<Button onClick={() => setState({ show: true })}>
Dialog with 2 actions
</ Button>
<Dialog
detail="This action cannot be undone."
show={state.show}
title="Permanently delete this work?"
primaryCta={{
action: () => setState({ show: false }),
text: "Delete",
}}
secondaryCta={{
action: () => setState({ show: false }),
text: "Cancel",
}}
/>
</>
)}
</ State> Copy