{"componentChunkName":"component---src-pages-components-toggle-code-mdx","path":"/components/toggle/code/","webpackCompilationHash":"858cd91bffcad76c0e29","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Toggle","description":"A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/toggle/code.mdx","titleType":"prepend","MdxNode":{"id":"6c19f068-56e0-5468-acb5-94d09cc3b052","children":[],"parent":"2670b170-d5ed-5f11-a92f-6de63cb8a756","internal":{"content":"---\ntitle: Toggle\ndescription: A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Toggle\n\n<ComponentCode\n  name=\"Toggle\"\n  component=\"toggle\"\n  variation=\"toggle\"\n  hasReactVersion=\"toggle--toggled\"\n  hasVueVersion=\"toggle--default\"\n  hasAngularVersion=\"?path=/story/toggle--basic\"\n  codepen=\"QPNddd\"></ComponentCode>\n\n## Small toggle\n\n<ComponentCode\n  name=\"Small toggle\"\n  component=\"toggle\"\n  variation=\"toggle--small\"\n  hasReactVersion=\"togglesmall--toggled\"\n  hasVueVersion=\"toggle--default&knob-small=true\"\n  hasAngularVersion=\"?path=/story/toggle--basic&knob-disabled=&knob-checked=&knob-size=sm\"\n  codepen=\"XQdppE\"></ComponentCode>\n\n## Documentation\n\n<ComponentDocs component=\"toggle\"></ComponentDocs>\n","type":"Mdx","contentDigest":"0d47a3081606c117aaca55ca275946e2","counter":1246,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Toggle","description":"A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Toggle\ndescription: A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Toggle\n\n<ComponentCode\n  name=\"Toggle\"\n  component=\"toggle\"\n  variation=\"toggle\"\n  hasReactVersion=\"toggle--toggled\"\n  hasVueVersion=\"toggle--default\"\n  hasAngularVersion=\"?path=/story/toggle--basic\"\n  codepen=\"QPNddd\"></ComponentCode>\n\n## Small toggle\n\n<ComponentCode\n  name=\"Small toggle\"\n  component=\"toggle\"\n  variation=\"toggle--small\"\n  hasReactVersion=\"togglesmall--toggled\"\n  hasVueVersion=\"toggle--default&knob-small=true\"\n  hasAngularVersion=\"?path=/story/toggle--basic&knob-disabled=&knob-checked=&knob-size=sm\"\n  codepen=\"XQdppE\"></ComponentCode>\n\n## Documentation\n\n<ComponentDocs component=\"toggle\"></ComponentDocs>\n","fileAbsolutePath":"/tmp/753a091b/src/pages/components/toggle/code.mdx"}}}}