{"componentChunkName":"component---src-pages-components-progress-indicator-code-mdx","path":"/components/progress-indicator/code/","result":{"pageContext":{"frontmatter":{"title":"Progress indicator","description":"A progress indicator is a visual representation of a user's progress through a set of steps. It guides the user through a number of steps in order to complete a specified process.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/progress-indicator/code.mdx","titleType":"prepend","MdxNode":{"id":"bbaef3b1-4df4-5a72-a5bb-b40722fc11e1","children":[],"parent":"eedd3fd0-8398-5a23-ac82-51edd8ec00ca","internal":{"content":"---\ntitle: Progress indicator\ndescription: A progress indicator is a visual representation of a user's progress through a set of steps. It guides the user through a number of steps in order to complete a specified process.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Progress indicator\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/progressindicator--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-progress-indicator--basic',\n    Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvprogress--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=progress-indicator',\n  }}\n  knobs={{ProgressStep: ['complete', 'current', 'disabled', 'invalid'], ProgressIndicator: ['vertical']}}>\n  {`\n  <div className=\"some-container\">\n    <ProgressIndicator currentIndex={1}>\n        <ProgressStep\n          label=\"First step\"\n          description=\"Step 1: Getting started with Carbon Design System\"\n        />\n        <ProgressStep\n          current\n          label=\"Second step with tooltip\"\n          description=\"Step 2: Getting started with Carbon Design System\"\n          renderLabel={() => (\n            <Tooltip\n              direction=\"bottom\"\n              showIcon={false}\n              triggerClassName=\"bx--progress-label\"\n              triggerText=\"Second step with tooltip\"\n              tooltipId=\"tooltipId-0\">\n              <p>Second step with tooltip</p>\n            </Tooltip>\n          )}\n        />\n        <ProgressStep\n          label=\"Third step\"\n          description=\"Step 3: Getting started with Carbon Design System\"\n          secondaryLabel=\"Optional label\"\n        />\n        <ProgressStep\n          invalid\n          label=\"Fourth step\"\n          description=\"Step 4: Getting started with Carbon Design System\"\n        />\n        <ProgressStep\n          disabled\n          label=\"Fifth step\"\n          description=\"Step 5: Getting started with Carbon Design System\"\n        />\n      </ProgressIndicator>\n  </div>\n`}\n\n</ComponentDemo>\n","type":"Mdx","contentDigest":"3f02e4253950c25a78a77ed8e434f0e4","counter":1524,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Progress indicator","description":"A progress indicator is a visual representation of a user's progress through a set of steps. It guides the user through a number of steps in order to complete a specified process.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Progress indicator\ndescription: A progress indicator is a visual representation of a user's progress through a set of steps. It guides the user through a number of steps in order to complete a specified process.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Progress indicator\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/progressindicator--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-progress-indicator--basic',\n    Vue: 'http://vue.carbondesignsystem.com/?path=/story/components-cvprogress--default',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=progress-indicator',\n  }}\n  knobs={{ProgressStep: ['complete', 'current', 'disabled', 'invalid'], ProgressIndicator: ['vertical']}}>\n  {`\n  <div className=\"some-container\">\n    <ProgressIndicator currentIndex={1}>\n        <ProgressStep\n          label=\"First step\"\n          description=\"Step 1: Getting started with Carbon Design System\"\n        />\n        <ProgressStep\n          current\n          label=\"Second step with tooltip\"\n          description=\"Step 2: Getting started with Carbon Design System\"\n          renderLabel={() => (\n            <Tooltip\n              direction=\"bottom\"\n              showIcon={false}\n              triggerClassName=\"bx--progress-label\"\n              triggerText=\"Second step with tooltip\"\n              tooltipId=\"tooltipId-0\">\n              <p>Second step with tooltip</p>\n            </Tooltip>\n          )}\n        />\n        <ProgressStep\n          label=\"Third step\"\n          description=\"Step 3: Getting started with Carbon Design System\"\n          secondaryLabel=\"Optional label\"\n        />\n        <ProgressStep\n          invalid\n          label=\"Fourth step\"\n          description=\"Step 4: Getting started with Carbon Design System\"\n        />\n        <ProgressStep\n          disabled\n          label=\"Fifth step\"\n          description=\"Step 5: Getting started with Carbon Design System\"\n        />\n      </ProgressIndicator>\n  </div>\n`}\n\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/26e993f/src/pages/components/progress-indicator/code.mdx"}}}}