{"componentChunkName":"component---src-pages-components-tabs-usage-mdx","path":"/components/tabs/usage/","result":{"pageContext":{"frontmatter":{"title":"Tabs","description":"Tabs are used to quickly navigate between views within the same context.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/tabs/usage.mdx","titleType":"prepend","MdxNode":{"id":"0119bf41-c1b4-5bde-96a9-636d2d544b42","children":[],"parent":"a4e94c25-cb9f-5f72-9749-8e956bc10758","internal":{"content":"---\ntitle: Tabs\ndescription: Tabs are used to quickly navigate between views within the same context.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## General guidance\n\nTabs are used to quickly navigate between views within the same context.\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\n## Format\n\n#### Tab label\n\nEach tab label describes the content contained within it. Labels are concise and use no more than two words. Keep in mind that at mobile widths and during translation, the character length of a label will impact the experience. Do not use icons in tab labels.\n\n#### Number of tabs\n\nIn most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If more than six tabs are needed, consider other navigation patterns, such as a [side-nav](/components/UI-shell-left-panel/code).\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## Variations\n\nThere are two variations of tabs, default and container. They are hierarchically the same and should never be nested within each other.\n\n| Tab styles  | Purpose                                                                                                                                       |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------- |\n| _Default_   | A standalone tab that can also be nested within components. It is commonly used with smaller content areas.                                   |\n| _Container_ | An emphasized tab that is always paired with an attached background container. It is commonly used for larger content areas, like sub-pages.  |\n\n<Row>\n<Column colLg={8}>\n\n![An example of container tabs on the left and default tabs on the right.](images/tab-usage-2.png)\n\n</Column>\n</Row>\n\n<Caption>Left: container tab. Right: default tab .</Caption>\n","type":"Mdx","contentDigest":"5ab14aa0ee0404a2a9fdacafa2f08cef","counter":1583,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Tabs","description":"Tabs are used to quickly navigate between views within the same context.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Tabs\ndescription: Tabs are used to quickly navigate between views within the same context.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## General guidance\n\nTabs are used to quickly navigate between views within the same context.\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\n## Format\n\n#### Tab label\n\nEach tab label describes the content contained within it. Labels are concise and use no more than two words. Keep in mind that at mobile widths and during translation, the character length of a label will impact the experience. Do not use icons in tab labels.\n\n#### Number of tabs\n\nIn most scenarios, you should use no more than six tabs. This maintains an uncluttered UI and reduces cognitive load for users. If more than six tabs are needed, consider other navigation patterns, such as a [side-nav](/components/UI-shell-left-panel/code).\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## Variations\n\nThere are two variations of tabs, default and container. They are hierarchically the same and should never be nested within each other.\n\n| Tab styles  | Purpose                                                                                                                                       |\n| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------- |\n| _Default_   | A standalone tab that can also be nested within components. It is commonly used with smaller content areas.                                   |\n| _Container_ | An emphasized tab that is always paired with an attached background container. It is commonly used for larger content areas, like sub-pages.  |\n\n<Row>\n<Column colLg={8}>\n\n![An example of container tabs on the left and default tabs on the right.](images/tab-usage-2.png)\n\n</Column>\n</Row>\n\n<Caption>Left: container tab. Right: default tab .</Caption>\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/tabs/usage.mdx"}}}}