{"componentChunkName":"component---src-pages-components-tag-code-mdx","path":"/components/tag/code/","result":{"pageContext":{"frontmatter":{"title":"Tag","description":"Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/tag/code.mdx","titleType":"prepend","MdxNode":{"id":"0b779ec8-5c6d-57d4-b088-f02ef5340fe8","children":[],"parent":"65d56a84-7cd5-5c21-8e62-a001559ca85d","internal":{"content":"---\ntitle: Tag\ndescription: Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Tag\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/tag--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tag--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtag--filter',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tag',\n  }}\n  knobs={{ Tag: ['filter', 'disabled'] }}>\n  {`\n  <>\n<Tag type=\"red\" title=\"Clear Filter\"> Red </Tag>\n<Tag type=\"magenta\" title=\"Clear Filter\"> Magenta </Tag>\n<Tag type=\"purple\" title=\"Clear Filter\"> Purple </Tag>\n<Tag type=\"blue\" title=\"Clear Filter\"> Blue </Tag>\n<Tag type=\"cyan\" title=\"Clear Filter\"> Cyan </Tag>\n<Tag type=\"teal\" title=\"Clear Filter\"> Teal </Tag>\n<Tag type=\"green\" title=\"Clear Filter\"> Green </Tag>\n<Tag type=\"gray\" title=\"Clear Filter\"> Gray </Tag>\n<Tag type=\"cool-gray\" title=\"Clear Filter\"> Cool gray </Tag>\n<Tag type=\"warm-gray\" title=\"Clear Filter\"> Warm gray </Tag>\n</>\n  `}\n</ComponentDemo>\n","type":"Mdx","contentDigest":"04b9c6ce2871e84b65fdadd2a0aed028","counter":1552,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Tag","description":"Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Tag\ndescription: Tags are used for items that need to be labeled, categorized, or organized using keywords that describe them.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Tag\n\n<ComponentDemo\n  links={{\n    React: 'https://react.carbondesignsystem.com/?path=/story/tag--default',\n    Angular:\n      'https://angular.carbondesignsystem.com/?path=/story/components-tag--basic',\n    Vue:\n      'http://vue.carbondesignsystem.com/?path=/story/components-cvtag--filter',\n    Vanilla: 'https://the-carbon-components.netlify.com/?nav=tag',\n  }}\n  knobs={{ Tag: ['filter', 'disabled'] }}>\n  {`\n  <>\n<Tag type=\"red\" title=\"Clear Filter\"> Red </Tag>\n<Tag type=\"magenta\" title=\"Clear Filter\"> Magenta </Tag>\n<Tag type=\"purple\" title=\"Clear Filter\"> Purple </Tag>\n<Tag type=\"blue\" title=\"Clear Filter\"> Blue </Tag>\n<Tag type=\"cyan\" title=\"Clear Filter\"> Cyan </Tag>\n<Tag type=\"teal\" title=\"Clear Filter\"> Teal </Tag>\n<Tag type=\"green\" title=\"Clear Filter\"> Green </Tag>\n<Tag type=\"gray\" title=\"Clear Filter\"> Gray </Tag>\n<Tag type=\"cool-gray\" title=\"Clear Filter\"> Cool gray </Tag>\n<Tag type=\"warm-gray\" title=\"Clear Filter\"> Warm gray </Tag>\n</>\n  `}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/26e993f/src/pages/components/tag/code.mdx"}}}}