{"componentChunkName":"component---src-pages-components-modal-usage-mdx","path":"/components/modal/usage/","webpackCompilationHash":"9a5cb62a61994334ab3f","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":"eaa30c12-648e-5476-8df7-9d10f6a34973","children":[],"parent":"237e1d06-607a-5e03-87ae-7a25ffd59152","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). 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":"1a97c22d49c4bf6f967cf5590a587265","counter":1201,"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). 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":"/tmp/35443907/src/pages/components/modal/usage.mdx"}}}}