Skip to contentSkip to navigationSkip to topbar
Figma
Star

Minimizable Dialog

Version 4.1.1GithubStorybookPeer review pending

A dialog that can be minimized.

Component preview theme
const MinimizableDialogExample = () => {
return (
<MinimizableDialogContainer>
<MinimizableDialogButton variant="primary" size="circle">
<ChatIcon decorative={false} title="Chat" />
</MinimizableDialogButton>
<MinimizableDialog aria-label="Live chat">
<MinimizableDialogHeader>Live chat</MinimizableDialogHeader>
<MinimizableDialogContent>
<Box padding='space70'>
<Heading as="div" variant="heading30">
Hi there!
</Heading>
<Paragraph>We’re here to help. Please give us some info to get started.</Paragraph>
<Box display="flex" flexDirection="column" rowGap="space60">
<Box>
<Label htmlFor='name-input'>Name</Label>
<Input id='name-input' type="text" />
</Box>
<Box>
<Label htmlFor='email-input'>Email address</Label>
<Input id='email-input' type="email" />
</Box>
<Box>
<Label htmlFor='question-textarea'>How can we help you?</Label>
<TextArea id='question-textarea' />
</Box>
</Box>
<Box marginTop="space190">
<Button variant="primary">Start chat</Button>
</Box>
</Box>
</MinimizableDialogContent>
</MinimizableDialog>
</MinimizableDialogContainer>
);
};
render(
<MinimizableDialogExample />
)

Guidelines

Guidelines page anchor

About Minimizable Dialog

About Minimizable Dialog page anchor

The Minimizable Dialog component is a non-modal dialog that can be minimized to the bottom right of the page. It is meant for situations like a chat dialog, where the user may start the chat and then want to minimize it while they complete other tasks on the page.

(warning)

Only use one Minimizable Dialog on a page

We currenly only support having one Minimizable Dialog open on a page. If you have questions, please post a GitHub Discussion(link takes you to an external page).

Minimizable Dialog and non-modal dialogs follow these accessibility guidelines:

  • There must be a focusable element inside the dialog.
  • There should be a close button so screen readers have a specific close action to target.
  • A Minimizable Dialog is a focus trap, and focus is placed inside it when it's shown.
  • A Minimizable Dialog must be triggered by an explicit user action, e.g. clicking a button.

Basic Minimizable Dialog

Basic Minimizable Dialog page anchor
Component preview theme
const MinimizableDialogExample = () => {
return (
<MinimizableDialogContainer>
<MinimizableDialogButton variant="primary" size="circle">
<ChatIcon decorative={false} title="Chat" />
</MinimizableDialogButton>
<MinimizableDialog aria-label="Live chat">
<MinimizableDialogHeader>Live chat</MinimizableDialogHeader>
<MinimizableDialogContent>
<Box padding='space70'>
<Heading as="div" variant="heading30">
Hi there!
</Heading>
<Paragraph>We’re here to help. Please give us some info to get started.</Paragraph>
<Box display="flex" flexDirection="column" rowGap="space60">
<Box>
<Label htmlFor='name-input'>Name</Label>
<Input id='name-input' type="text" />
</Box>
<Box>
<Label htmlFor='email-input'>Email address</Label>
<Input id='email-input' type="email" />
</Box>
<Box>
<Label htmlFor='question-textarea'>How can we help you?</Label>
<TextArea id='question-textarea' />
</Box>
</Box>
<Box marginTop="space190">
<Button variant="primary">Start chat</Button>
</Box>
</Box>
</MinimizableDialogContent>
</MinimizableDialog>
</MinimizableDialogContainer>
);
};
render(
<MinimizableDialogExample />
)

The MinimizableDialogButton renders a Button component and accepts all of its props, which are listed on the Button page.

Component preview theme
const MinimizableDialogButtonExample = () => {
return (
<Box display="flex" flexDirection="row" columnGap="space70">
<MinimizableDialogContainer>
<MinimizableDialogButton variant="primary">
Open dialog
</MinimizableDialogButton>
<MinimizableDialog aria-label="Dialog">
<MinimizableDialogHeader>Dialog</MinimizableDialogHeader>
<MinimizableDialogContent>
<Box padding='space70'>
This is the Twilio styled minimizable dialog that you can use in all your applications.
</Box>
</MinimizableDialogContent>
</MinimizableDialog>
</MinimizableDialogContainer>
<MinimizableDialogContainer>
<MinimizableDialogButton variant="secondary_icon" size="icon_small">
<PlusIcon decorative={false} title="Open popover" />
</MinimizableDialogButton>
<MinimizableDialog aria-label="Dialog">
<MinimizableDialogHeader>Dialog</MinimizableDialogHeader>
<MinimizableDialogContent>
<Box padding='space70'>
This is the Twilio styled minimizable dialog that you can use in all your applications.
</Box>
</MinimizableDialogContent>
</MinimizableDialog>
</MinimizableDialogContainer>
<MinimizableDialogContainer>
<MinimizableDialogButton variant="reset" size="reset">
Open dialog
</MinimizableDialogButton>
<MinimizableDialog aria-label="Dialog">
<MinimizableDialogHeader>Dialog</MinimizableDialogHeader>
<MinimizableDialogContent>
<Box padding='space70'>
This is the Twilio styled minimizable dialog that you can use in all your applications.
</Box>
</MinimizableDialogContent>
</MinimizableDialog>
</MinimizableDialogContainer>
</Box>
);
};
render(
<MinimizableDialogButtonExample />
)

Minimizable Dialog comes with the option of "hooking" into the internal state by using the state hook originally provided by Reakit(link takes you to an external page).

Rather than the state be internal to the component, you can use the useMinimizableDialogState hook and pass the returned state to MinimizableDialogContainer as the state prop.

This allows you to use certain returned props from the state hook, including functions like hide and show.

It should be noted that when doing so, the state prop takes precedent over the other properties that affect the state or initial state of the Minimizable Dialog. They will be ignored in favour of them being provided as arguments to the useMinimizableDialogState hook.

For full details on how to use the state hook, and what props to provide it, follow the Non-Modal Dialog Primitive documentation.

Component preview theme
const HookExample = () => {
const dialog = useMinimizableDialogState({});
return (
<Box display="flex" flexDirection="column" rowGap="space70">
<Box>
<MinimizableDialogContainer state={dialog}>
<MinimizableDialogButton variant="primary">
Minimizable Dialog Button
</MinimizableDialogButton>
<MinimizableDialog aria-label="Dialog">
<MinimizableDialogHeader>Dialog</MinimizableDialogHeader>
<MinimizableDialogContent>
<Box padding='space70'>
This is the Twilio styled minimizable dialog that you can use in all your applications.
</Box>
</MinimizableDialogContent>
</MinimizableDialog>
</MinimizableDialogContainer>
</Box>
<Box>
<Button variant="primary" onClick={() => dialog.show()}>Open dialog</Button>
</Box>
<Box>
<Button variant="primary" onClick={() => dialog.hide()}>Close dialog</Button>
</Box>
<Box>
<Button variant="primary" onClick={() => dialog.minimize()}>Minimize dialog</Button>
</Box>
<Box>
<Button variant="primary" onClick={() => dialog.expand()}>Expand dialog</Button>
</Box>
</Box>
);
};
render(
<HookExample />
)