{"componentChunkName":"component---src-pages-components-tabs-usage-mdx","path":"/components/tabs/usage/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Tabs","description":"Tabs are used to quickly navigate between views within the same context.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/tabs/usage.mdx","titleType":"prepend","MdxNode":{"id":"92fde06b-6aaf-5150-8d36-473dcc6e2132","children":[],"parent":"e4ee67f5-9930-5afd-815a-c565b2576d78","internal":{"content":"---\ntitle: Tabs\ndescription: Tabs are used to quickly navigate between views within the same context.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\n_Tabs_ are used to quickly navigate between views within the same context.\n\n## Format\n\n#### Text\n\nEach tab label describes its content and sets user expectations. Labels are concise and use one to two words maximum. Keep in mind that at mobile widths, the character length of a title will impact the experience. Icons are not permitted in tab labels.\n\n#### Number of tabs\n\nA maximum of six tabs may be displayed. This is to maintain an uncluttered UI and reduce cognitive load for users.\n\n#### Order\n\nTab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.\n\n<Row>\n<Column colLg={8}>\n\n![An example of tabs being used.](images/tab-usage-1.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"1e14366116afab11319dedf309c311ed","counter":1386,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Tabs","description":"Tabs are used to quickly navigate between views within the same context.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Tabs\ndescription: Tabs are used to quickly navigate between views within the same context.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\n_Tabs_ are used to quickly navigate between views within the same context.\n\n## Format\n\n#### Text\n\nEach tab label describes its content and sets user expectations. Labels are concise and use one to two words maximum. Keep in mind that at mobile widths, the character length of a title will impact the experience. Icons are not permitted in tab labels.\n\n#### Number of tabs\n\nA maximum of six tabs may be displayed. This is to maintain an uncluttered UI and reduce cognitive load for users.\n\n#### Order\n\nTab order should be consistent across an experience. Tabs with related content should be grouped adjacent to each other.\n\n<Row>\n<Column colLg={8}>\n\n![An example of tabs being used.](images/tab-usage-1.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/components/tabs/usage.mdx"}}}}