{
    "componentChunkName": "component---src-layouts-react-component-layout-tsx",
    "path": "/components/dialog/react",
    "result": {"data":{"primerReactVersion":{"version":"36.5.0"},"sitePage":{"path":"/components/dialog","context":{"frontmatter":{"title":"Dialog","description":"Dialog is a floating surface used to display transient content such as confirmation actions, selection options, and more.","reactId":"dialog","railsIds":["Primer::Alpha::Dialog"],"figmaId":"dialog","cssId":null}}},"reactComponent":{"name":"Dialog","status":"alpha","a11yReviewed":false,"stories":[{"id":"components-dialog--default","code":"() => {\n  const [isOpen, setIsOpen] = useState(false)\n  const returnFocusRef = useRef(null)\n  return (\n    <div>\n      <Button\n        data-testid=\"trigger-button\"\n        ref={returnFocusRef}\n        onClick={() => setIsOpen(true)}\n      >\n        Show Dialog\n      </Button>\n      <Dialog\n        returnFocusRef={returnFocusRef}\n        isOpen={isOpen}\n        onDismiss={() => setIsOpen(false)}\n        aria-labelledby=\"header\"\n      >\n        <div data-testid=\"inner\">\n          <Dialog.Header id=\"header\">Title</Dialog.Header>\n          <Box p={3}>\n            <Text fontFamily=\"sans-serif\">Some content</Text>\n          </Box>\n        </div>\n      </Dialog>\n    </div>\n  )\n}"}],"props":[{"name":"isOpen","type":"boolean","description":"Whether or not the dialog is open","defaultValue":null,"required":null,"deprecated":null},{"name":"onDismiss","type":"() => void","description":"Function that will be called when the dialog is closed","defaultValue":null,"required":null,"deprecated":null},{"name":"returnFocusRef","type":" React.RefObject<HTMLElement>","description":"The element to restore focus back to after the `Dialog` is closed","defaultValue":null,"required":null,"deprecated":null},{"name":"initialFocusRef","type":" React.RefObject<HTMLElement>","description":"Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused.","defaultValue":null,"required":null,"deprecated":null},{"name":"aria-labelledby","type":"string","description":"Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both.","defaultValue":null,"required":null,"deprecated":null},{"name":"aria-label","type":"string","description":"Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both.","defaultValue":null,"required":null,"deprecated":null},{"name":"sx","type":"SystemStyleObject","description":null,"defaultValue":null,"required":null,"deprecated":null}],"subcomponents":[{"name":"Dialog.Header","props":[{"name":"sx","type":"SystemStyleObject","description":null,"defaultValue":null,"required":null,"deprecated":null}]}]}},"pageContext":{"componentId":"dialog","parentPath":"/components/dialog"}},
    "staticQueryHashes": ["1056354862","2102389209","2745756513","2790671566","2939673985","3235046957","3907230164"]}