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 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.
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.
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.
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.
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.
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.
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 />)