1"use strict";(self.webpackChunk_synergycodes_overflow_ui_website=self.webpackChunk_synergycodes_overflow_ui_website||[]).push([[2720],{5647:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>c,contentTitle:()=>d,default:()=>f,frontMatter:()=>u,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"authored/ui/modal/modal","title":"Modal","description":"A modal dialog component","source":"@site/docs/authored/ui/modal/modal.mdx","sourceDirName":"authored/ui/modal","slug":"/authored/ui/modal/","permalink":"/ui-components/authored/ui/modal/","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Modal","description":"A modal dialog component"},"sidebar":"mainSidebar","previous":{"title":"Menu","permalink":"/ui-components/authored/ui/menu/"},"next":{"title":"Nav Button","permalink":"/ui-components/authored/ui/nav-button/"}}');var a=t(4489),s=t(3237),i=t(6745);const l='function ModalExample() {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <>\n <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n <Modal\n open={isOpen}\n onClose={() => setIsOpen(false)}\n title="Example Modal"\n subtitle="This is an example subtitle"\n icon={<User />}\n size="regular"\n footerVariant="integrated"\n footer={\n <>\n <Button onClick={() => setIsOpen(false)} variant="secondary">\n Cancel\n </Button>\n <Button onClick={() => setIsOpen(false)}>Confirm</Button>\n </>\n }\n >\n <p>\n This is an example of how to use the Modal component with all\n available props. The modal includes a title, subtitle, icon, and\n footer with action buttons.\n </p>\n </Modal>\n </>\n );\n}\n';function r(){return(0,a.jsx)(i.h,{cssPaths:["components/modal/modal.module.css"],componentPath:"components/modal/modal.tsx",exampleCode:l})}const u={title:"Modal",description:"A modal dialog component"},d=void 0,c={},p=[];function m(n){return(0,a.jsx)(r,{})}function f(n={}){const{wrapper:e}={...(0,s.R)(),...n.components};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(m,{...n})}):m()}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.