Modal

Most content creation in our products takes place in modals. The content in modals should be purely single action, for example ‘creating a task’, or ‘submitting an invoice’. Flows that invoke more than one action (such as user onboarding, or payment onboarding) should not take place in modals. Instead, consider using a wizard.

Modals are also one of the highest stacking order components, second only to alerts and notifications.

Best Practices

  • Modals are invasive in that they block the rest of the application from being used. Keep the action of the modal (whether it is a notice, or a form) as succinct as possible.
  • Never stack modals on top of one another. If a modal needs to trigger another modal, then consider using a different flow, such as a wizard.

Props

NameTypeDescription
children
nodeThe main body of the modal
title
stringThe main heading of the modal
onClose
unionA function to call when closing the modal - If not set, the modal will not be dismissable
actions
nodeA set of actions to be displayed in the modal footer
open
boolIs the modal open or not
hasFixedHeader
boolAllows content to scroll underneath the header
hasFixedFooter
boolAllows content to scroll underneath the footer

Standard Modal

Create Account
Minimum of 8 characters
<DemoModal> <Modal actions={<ButtonGroup align="right" spacing={true}><Button variant="tertiary">Cancel</Button><Button>Create Account</Button></ButtonGroup>} title="Create Account" > <FieldRow> <Field label="Your name"> <Input placeholder="John Smith" type="text" /> </Field> </FieldRow> <FieldRow> <Field label="Your email"> <Input placeholder="john.smith@example.net" type="text" /> </Field> </FieldRow> <FieldRow> <Field hint="Minimum of 8 characters" label="Choose a password" > <Input placeholder="123456" type="text" /> </Field> </FieldRow> </Modal> , </DemoModal>

Remove default footer

Create Project
An American monkey, after getting drunk on brandy, would never touch it again, and thus is much wiser than most men.
<DemoModal> <Modal title="Create Project"> <Text multiline={true}> An American monkey, after getting drunk on brandy, would never touch it again, and thus is much wiser than most men. </Text> </Modal> , </DemoModal>

A non-dismissable modal

Warning
This modal can't be closed
<DemoModal noClose={true}> <Modal title="Warning"> <Text multiline={true}> This modal can't be closed </Text> </Modal> , </DemoModal>

Tall body

Create Project
Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum.Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum.Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum.Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum.Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum.Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum.Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum.Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum.Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum.Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum.
<DemoModal> <Modal actions={<ButtonGroup align="right" spacing={true}><Button variant="tertiary">Cancel</Button><Button>Create Project</Button></ButtonGroup>} hasFixedFooter={true} hasFixedHeader={true} title="Create Project" > <Text multiline={true}> Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum. </Text> <Text multiline={true}> Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum. </Text> <Text multiline={true}> Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum. </Text> <Text multiline={true}> Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum. </Text> <Text multiline={true}> Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum. </Text> <Text multiline={true}> Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum. </Text> <Text multiline={true}> Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum. </Text> <Text multiline={true}> Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum. </Text> <Text multiline={true}> Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum. </Text> <Text multiline={true}> Etiam aliquet turpis non est euismod egestas. Morbi fermentum maximus quam, ac porta lorem auctor ac. Vivamus sodales libero nec turpis iaculis, eu mollis risus ornare. Aliquam porttitor, metus vitae dignissim euismod, lacus felis luctus massa, eleifend convallis arcu odio cursus felis. Pellentesque eu tincidunt lacus. Etiam suscipit eget justo ac vulputate. Phasellus nec tempus nunc, et egestas dui. Praesent ullamcorper eros et aliquam ullamcorper. Cras eget metus feugiat, bibendum nisl id, facilisis ipsum. </Text> </Modal> , </DemoModal>