{"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","Accessibility"]},"relativePagePath":"/components/modal/usage.mdx","titleType":"prepend","MdxNode":{"id":"9057815d-8c0d-59b9-bf07-f10a9c6131ce","children":[],"parent":"2469f985-d480-5298-854c-6033d5fca08f","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', 'Accessibility']\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":"409e6da571378cda78d583fd45ed5bad","counter":1353,"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","Accessibility"]},"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', 'Accessibility']\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/3ed0734e/src/pages/components/modal/usage.mdx"}}}}