Resources
Intro & Anatomy
Tabs divide content into distinct sections, allowing users to switch between different views whilst staying on the same page.
Use tabs when you need to present related information categories that users can explore independently, such as account settings, product details, or feature comparisons.
When a user selects a tab, only that tab's content appears in the display area whilst other sections remain hidden. Each tab should contain content that logically belongs together and contributes to the overall purpose of the interface. Typical applications include configuration panels, item specifications, and categorised information displays.
Options & Styles
Label & Icon
Labels are mandatory and should clearly identify each tab's content.
Tab labels can be displayed with or without icons, but keep all labels within a tab group consistent in format and style.
States
Active and default tabs both have default, hover and error states to provide clear visual feedback about current selection and interactive elements.
Disabled
Disabled tabs show when certain sections aren't currently available, though this should be used sparingly to maintain clear navigation paths.
Best Practice & Usage
Tabs should organise related content efficiently whilst maintaining clear navigation and consistent labelling. Use tabs to reduce cognitive load and improve content accessibility.
Use tabs to group related content into different categories, reducing long scroll time and cognitive load.
Never use tabs as a primary navigation. Use the navigation component instead.
Use tabs whenever there are two or more content sections.
Avoid using more than seven content sections. Try to restructure your content instead.
Keep labels short, preferably to one word, and descriptive.
Avoid using long tab labels and refrain from using non-descriptive labels. Avoid truncating tab labels.
Use consistent tab labels in language, tone of voice and type (text or text+icon).
Stick to one type of label, either text-only or text+icon. Don't mix language, wording and tone of voice.
Display tabs full width (100vw, or 100%) on mobile for optimal usability
Avoid displaying tabs smaller than full width on mobile devices.
Theming
You can customise colours, font styles and weights, border widths and radius, and spacing to match your design requirements.
When not using MDX icons, a slot is available to use your own icon library or SVG icons within tooltip content.