{"componentChunkName":"component---src-pages-components-tag-style-mdx","path":"/components/tag/style/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"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"]},"relativePagePath":"/components/tag/style.mdx","titleType":"prepend","MdxNode":{"id":"bce58742-23bf-50a3-9b52-c500bb0d504d","children":[],"parent":"6fe48312-5c03-5253-96f6-b9e805c1fcc1","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']\n---\n\n## Color\n\nUsing the IBM Design Language [color palette](https://www.ibm.com/design/language/elements/color), the tag text color should be 5 steps away from the tag background color\n\n## Typography\n\nTag text should be set in sentence case, and should only have one word. However, if more than one is necessary, then connect the words using a hyphen with no spaces.\n\n| Property   | Font-size (px/rem) | Font-weight   | Type token  |\n| ---------- | ------------------ | ------------- | ----------- |\n| `.bx--tag` | 12 / 0.75          | Regular / 400 | `$label-01` |\n\n## Structure\n\nAll tags have the same height. However, the width of tags varies based on the amount of content. All four corners of a tag are rounded with a 24px radius.\n\n| Class      | Property                    | px / rem | Spacing token |\n| ---------- | --------------------------- | -------- | ------------- |\n| `.bx--tag` | height                      | 24 / 1.5 | –             |\n| `.bx--tag` | radius                      | 24px     | –             |\n| `.bx--tag` | margin                      | 8 / 0.5  | `$spacing-03` |\n| `.bx--tag` | padding-left, padding-right | 8 / 0.5  | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurementst](images/tag-style-1.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for a tag | px / rem</Caption>\n","type":"Mdx","contentDigest":"74a19b2526f0e279de564779726a2090","counter":1356,"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"]},"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']\n---\n\n## Color\n\nUsing the IBM Design Language [color palette](https://www.ibm.com/design/language/elements/color), the tag text color should be 5 steps away from the tag background color\n\n## Typography\n\nTag text should be set in sentence case, and should only have one word. However, if more than one is necessary, then connect the words using a hyphen with no spaces.\n\n| Property   | Font-size (px/rem) | Font-weight   | Type token  |\n| ---------- | ------------------ | ------------- | ----------- |\n| `.bx--tag` | 12 / 0.75          | Regular / 400 | `$label-01` |\n\n## Structure\n\nAll tags have the same height. However, the width of tags varies based on the amount of content. All four corners of a tag are rounded with a 24px radius.\n\n| Class      | Property                    | px / rem | Spacing token |\n| ---------- | --------------------------- | -------- | ------------- |\n| `.bx--tag` | height                      | 24 / 1.5 | –             |\n| `.bx--tag` | radius                      | 24px     | –             |\n| `.bx--tag` | margin                      | 8 / 0.5  | `$spacing-03` |\n| `.bx--tag` | padding-left, padding-right | 8 / 0.5  | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurementst](images/tag-style-1.png)\n\n</div>\n\n<Caption>Structure and spacing measurements for a tag | px / rem</Caption>\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/components/tag/style.mdx"}}}}