{"componentChunkName":"component---src-pages-components-button-code-mdx","path":"/components/button/code/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Button","description":"Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.```","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/button/code.mdx","titleType":"prepend","MdxNode":{"id":"d8fa8347-574c-5dc4-8653-da17257f360c","children":[],"parent":"88323232-df31-5da8-a8d1-6195a2d823cd","internal":{"content":"---\ntitle: Button\ndescription: Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.```\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Primary button\n\n<ComponentCode\n  name=\"Primary button\"\n  component=\"button\"\n  variation=\"button--primary\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--primary\"\n  hasAngularVersion=\"?path=/story/button--basic\"\n  codepen=\"xeZxLe\"></ComponentCode>\n\n## Secondary button\n\n<ComponentCode\n  name=\"Secondary button\"\n  component=\"button\"\n  variation=\"button--secondary\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--secondary\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=secondary&knob-Size of the buttons=normal\"\n  codepen=\"OGMJxW\"></ComponentCode>\n\n## Tertiary button\n\n<ComponentCode\n  name=\"Tertiary button\"\n  component=\"button\"\n  variation=\"button--tertiary\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--tertiary\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=tertiary&knob-Size of the buttons=normal\"\n  codepen=\"VNewrL\"></ComponentCode>\n\n## Ghost button\n\n<ComponentCode\n  name=\"Ghost button\"\n  component=\"button\"\n  variation=\"button--ghost\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--ghost\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=ghost&knob-Size of the buttons=normal\"\n  codepen=\"MRKWZz\"></ComponentCode>\n\n## Danger button\n\n<ComponentCode\n  name=\"Danger button\"\n  component=\"button\"\n  variation=\"button--danger\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--danger\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=danger&knob-Size of the buttons=normal\"\n  codepen=\"wZMvNP\"></ComponentCode>\n\n## Small primary button\n\n<ComponentCode\n  name=\"Small primary button\"\n  component=\"button\"\n  variation=\"button--primary--small\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--primary&knob-small=true\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=primary&knob-Size of the buttons=sm\"\n  codepen=\"oObNVb\"></ComponentCode>\n\n## Small secondary button\n\n<ComponentCode\n  name=\"Small secondary button\"\n  component=\"button\"\n  variation=\"button--secondary--small\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--secondary&knob-small=true\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=secondary&knob-Size of the buttons=sm\"\n  codepen=\"ROrNbp\"></ComponentCode>\n\n## Small tertiary button\n\n<ComponentCode\n  name=\"Small tertiary button\"\n  component=\"button\"\n  variation=\"button--tertiary--small\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--tertiary&knob-small=true\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=tertiary&knob-Size of the buttons=sm\"\n  codepen=\"ZZQYGN\"></ComponentCode>\n\n## Small ghost button\n\n<ComponentCode\n  name=\"Small ghost button\"\n  component=\"button\"\n  variation=\"button--ghost--small\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--ghost&knob-small=true\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=ghost&knob-Size of the buttons=sm\"\n  codepen=\"eoJmpw\"></ComponentCode>\n\n## Small danger button\n\n<ComponentCode\n  name=\"Small danger button\"\n  component=\"button\"\n  variation=\"button--danger--small\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--danger&knob-small=true\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=danger&knob-Size of the buttons=sm\"\n  codepen=\"KYVwXY\"></ComponentCode>\n\n## Button set\n\n<ComponentCode\n  name=\"Button set\"\n  component=\"button\"\n  variation=\"button--set\"\n  hasReactVersion=\"buttons--sets-of-buttons\"\n  hasAngularVersion=\"?path=/story/button--basic\"\n  codepen=\"pBgvdX\"></ComponentCode>\n\n## Documentation\n\n<ComponentDocs component=\"button\"></ComponentDocs>\n","type":"Mdx","contentDigest":"3c0b97510af3c3ceda50e3d33a559116","counter":1095,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Button","description":"Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.```","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Button\ndescription: Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.```\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Primary button\n\n<ComponentCode\n  name=\"Primary button\"\n  component=\"button\"\n  variation=\"button--primary\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--primary\"\n  hasAngularVersion=\"?path=/story/button--basic\"\n  codepen=\"xeZxLe\"></ComponentCode>\n\n## Secondary button\n\n<ComponentCode\n  name=\"Secondary button\"\n  component=\"button\"\n  variation=\"button--secondary\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--secondary\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=secondary&knob-Size of the buttons=normal\"\n  codepen=\"OGMJxW\"></ComponentCode>\n\n## Tertiary button\n\n<ComponentCode\n  name=\"Tertiary button\"\n  component=\"button\"\n  variation=\"button--tertiary\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--tertiary\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=tertiary&knob-Size of the buttons=normal\"\n  codepen=\"VNewrL\"></ComponentCode>\n\n## Ghost button\n\n<ComponentCode\n  name=\"Ghost button\"\n  component=\"button\"\n  variation=\"button--ghost\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--ghost\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=ghost&knob-Size of the buttons=normal\"\n  codepen=\"MRKWZz\"></ComponentCode>\n\n## Danger button\n\n<ComponentCode\n  name=\"Danger button\"\n  component=\"button\"\n  variation=\"button--danger\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--danger\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=danger&knob-Size of the buttons=normal\"\n  codepen=\"wZMvNP\"></ComponentCode>\n\n## Small primary button\n\n<ComponentCode\n  name=\"Small primary button\"\n  component=\"button\"\n  variation=\"button--primary--small\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--primary&knob-small=true\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=primary&knob-Size of the buttons=sm\"\n  codepen=\"oObNVb\"></ComponentCode>\n\n## Small secondary button\n\n<ComponentCode\n  name=\"Small secondary button\"\n  component=\"button\"\n  variation=\"button--secondary--small\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--secondary&knob-small=true\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=secondary&knob-Size of the buttons=sm\"\n  codepen=\"ROrNbp\"></ComponentCode>\n\n## Small tertiary button\n\n<ComponentCode\n  name=\"Small tertiary button\"\n  component=\"button\"\n  variation=\"button--tertiary--small\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--tertiary&knob-small=true\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=tertiary&knob-Size of the buttons=sm\"\n  codepen=\"ZZQYGN\"></ComponentCode>\n\n## Small ghost button\n\n<ComponentCode\n  name=\"Small ghost button\"\n  component=\"button\"\n  variation=\"button--ghost--small\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--ghost&knob-small=true\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=ghost&knob-Size of the buttons=sm\"\n  codepen=\"eoJmpw\"></ComponentCode>\n\n## Small danger button\n\n<ComponentCode\n  name=\"Small danger button\"\n  component=\"button\"\n  variation=\"button--danger--small\"\n  hasReactVersion=\"buttons--default\"\n  hasVueVersion=\"button--danger&knob-small=true\"\n  hasAngularVersion=\"?path=/story/button--basic&knob-Button kind=danger&knob-Size of the buttons=sm\"\n  codepen=\"KYVwXY\"></ComponentCode>\n\n## Button set\n\n<ComponentCode\n  name=\"Button set\"\n  component=\"button\"\n  variation=\"button--set\"\n  hasReactVersion=\"buttons--sets-of-buttons\"\n  hasAngularVersion=\"?path=/story/button--basic\"\n  codepen=\"pBgvdX\"></ComponentCode>\n\n## Documentation\n\n<ComponentDocs component=\"button\"></ComponentDocs>\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/button/code.mdx"}}}}