{"componentChunkName":"component---src-pages-components-modal-usage-mdx","path":"/components/modal/usage/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Modal","description":"Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. Modals interrupt user workflow by design.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/modal/usage.mdx","titleType":"prepend","MdxNode":{"id":"bc890451-6b4c-5624-9982-c8083c0c4a3d","children":[],"parent":"0027da5a-a5e8-59ff-823c-c3efa1f7b9e7","internal":{"content":"---\ntitle: Modal\ndescription: Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. Modals interrupt user workflow by design.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n### Modals communicate information via a secondary window and allow the user to maintain the context of a particular task.\n\n<AnchorLinks>\n\n<AnchorLink>General guidance</AnchorLink>\n<AnchorLink>Format</AnchorLink>\n<AnchorLink>Variations</AnchorLink>\n\n</AnchorLinks>\n\n## General guidance\n\nModals interrupt user workflow by design. They are most effective when a task must be completed before a user can continue. While effective when used correctly, modals should be used sparingly to limit disruption to a user experience.\n\n#### Dismissal\n\nModals may be dismissed in 3 ways:\n\n- Using the “✕” in the upper right-hand corner of the modal\n- Pressing the `ESC` key\n- Clicking or touching outside of the modal\n\n## Format\n\nThe modal is composed of three distinct zones: A header, the body, and a footer. Components (eg. data table, form, progress indicator) can occupy the full width of the modal.\n\n#### Header\n\nThe header of your modal should mirror the action that launched the modal. Headers must include a close button “✕” in the upper right-hand corner of the modal. You can also include an optional label above your header text. This is an opportunity to offer additional context.\n\n#### Body\n\nA modal should have minimal body content. Components that may be used in modals include: form fields, text area, select, and radio buttons. Text, including the paragraph component, should only be 75% of the modal's width.\n\n#### Footer\n\nThe footer area of a modal typically contains either one or two [buttons](/components/button/code). Do not include three buttons in the footer of your modal. If you need to include a “help” or other non-primary action, include it as a link in the modal's body.\n\n<Row>\n<Column colLg={8}>\n\n![Example of modal with one button.](images/modal-usage-4a.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of modal with two buttons.](images/modal-usage-4b.png)\n\n</Column>\n</Row>\n\n## Variations\n\n### Transactional modal\n\nTransactional modals are used to validate user decisions or to gain secondary confirmation from the user. Typically, the modal requests either a 'yes' or 'no' response.\n\n<Row>\n<Column colLg={8}>\n\n![transactional modal](images/modal-usage-1.png)\n\n</Column>\n</Row>\n\n### Input modal\n\nModals used in this case include input areas that the user may interact with. These may include but are not limited to forms, dropdowns, selectors, and links.\n\n<Row>\n<Column colLg={8}>\n\n![input modal](images/modal-usage-2.png)\n\n</Column>\n</Row>\n\n### Passive modal\n\nThe passive modal is a style of notification. Passive modals are highly disruptive to a user experience, and should only be used if a user must address something immediately.\n\nPassive modal notifications are persistent on-screen. Users must either engage with or dismiss the notification.\n\n<Row>\n<Column colLg={8}>\n\n![Passive modal](images/modal-usage-3.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"b655bcce5cd008f29f570c4483eddcff","counter":1366,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Modal","description":"Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. Modals interrupt user workflow by design.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Modal\ndescription: Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. Modals interrupt user workflow by design.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n### Modals communicate information via a secondary window and allow the user to maintain the context of a particular task.\n\n<AnchorLinks>\n\n<AnchorLink>General guidance</AnchorLink>\n<AnchorLink>Format</AnchorLink>\n<AnchorLink>Variations</AnchorLink>\n\n</AnchorLinks>\n\n## General guidance\n\nModals interrupt user workflow by design. They are most effective when a task must be completed before a user can continue. While effective when used correctly, modals should be used sparingly to limit disruption to a user experience.\n\n#### Dismissal\n\nModals may be dismissed in 3 ways:\n\n- Using the “✕” in the upper right-hand corner of the modal\n- Pressing the `ESC` key\n- Clicking or touching outside of the modal\n\n## Format\n\nThe modal is composed of three distinct zones: A header, the body, and a footer. Components (eg. data table, form, progress indicator) can occupy the full width of the modal.\n\n#### Header\n\nThe header of your modal should mirror the action that launched the modal. Headers must include a close button “✕” in the upper right-hand corner of the modal. You can also include an optional label above your header text. This is an opportunity to offer additional context.\n\n#### Body\n\nA modal should have minimal body content. Components that may be used in modals include: form fields, text area, select, and radio buttons. Text, including the paragraph component, should only be 75% of the modal's width.\n\n#### Footer\n\nThe footer area of a modal typically contains either one or two [buttons](/components/button/code). Do not include three buttons in the footer of your modal. If you need to include a “help” or other non-primary action, include it as a link in the modal's body.\n\n<Row>\n<Column colLg={8}>\n\n![Example of modal with one button.](images/modal-usage-4a.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of modal with two buttons.](images/modal-usage-4b.png)\n\n</Column>\n</Row>\n\n## Variations\n\n### Transactional modal\n\nTransactional modals are used to validate user decisions or to gain secondary confirmation from the user. Typically, the modal requests either a 'yes' or 'no' response.\n\n<Row>\n<Column colLg={8}>\n\n![transactional modal](images/modal-usage-1.png)\n\n</Column>\n</Row>\n\n### Input modal\n\nModals used in this case include input areas that the user may interact with. These may include but are not limited to forms, dropdowns, selectors, and links.\n\n<Row>\n<Column colLg={8}>\n\n![input modal](images/modal-usage-2.png)\n\n</Column>\n</Row>\n\n### Passive modal\n\nThe passive modal is a style of notification. Passive modals are highly disruptive to a user experience, and should only be used if a user must address something immediately.\n\nPassive modal notifications are persistent on-screen. Users must either engage with or dismiss the notification.\n\n<Row>\n<Column colLg={8}>\n\n![Passive modal](images/modal-usage-3.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/zeit/3eb073a4/src/pages/components/modal/usage.mdx"}}}}