{"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":"58798bb1-75b2-5657-8ef5-3b0395eba35c","children":[],"parent":"f4f603f2-aa5b-5655-8a7f-419cb898c5e2","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  <>\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":"9f35d1cb269313204ed0af0fe365e35a","counter":1557,"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  <>\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/3b23ef32/src/pages/components/tag/code.mdx"}}}}