Streamlining Navigation with the Tab Component
The Tab component facilitate smooth navigation through different sections or related information within your user interface.
Features
Discover the key features of the Tab component.
Tabbed Navigation
Tabs organize content into distinct sections, enabling users to switch between them effortlessly. Enhance user experience with intuitive tab-based navigation for seamless exploration.
Visual Content Segmentation
Each tab represents a content category, providing clear visual cues for users to locate desired information easily. Improve user engagement with visually segmented tabs.
Customizable Interface
Tailor tab styles and layouts to match interface aesthetics, ensuring consistency and adaptability. Enhance user experience with customizable tab elements that align with your brand's visual identity.
Anatomy
Background
A b.white background serves as the canvas for the tab, maintaining a clean and streamlined appearance.
Text
The text within the tab utilizes a text-secondary color, ensuring readability and a harmonious blend with the background.
Icon Lead
A nested instance of an icon as a lead element, enhancing the visual representation and recognition of the tab's purpose.
Badge Trail
A nested instance of a badge as a trail element, providing additional information or notifications related to the tab.
Example Use Cases
Categorization
Tabs are used to categorize related content into separate sections, making it easier for users to find and access specific information or functionality.
Navigation
Users can navigate between tabs by clicking on them. Each tab represents a different category or topic, and selecting a tab displays the content associated with that category while hiding the content of other tabs.
Visibility
Tabs should clearly indicate which one is currently active or selected. This helps users understand their current location within the application and which section of content is currently being viewed.
Consistency
Maintain consistency in the placement, styling, and behavior of tabs across the application. Consistent tab design ensures a cohesive user experience and makes it easier for users to understand and interact with the interface.
Guidelines for Usage
When incorporating the Tab component into a user interface, it's essential to adhere to the following guidelines:
Clear Labels: Ensure that each tab has a clear and descriptive label that accurately represents the content or functionality associated with that tab. Use concise language to make the labels easy to understand.
Accessible Interaction: Design tabs to be easily clickable and accessible to all users, including those using assistive technologies. Provide sufficient clickable area and ensure that the active tab state is clearly distinguishable.
Responsive Design: Design the Tab component to be responsive, ensuring that it adapts well to different screen sizes and orientations. Consider how the layout and presentation of the tabs may need to adjust on smaller screens to maintain usability.
Limited Number of Tabs: Avoid overwhelming users with too many tabs. Limit the number of tabs displayed simultaneously to prevent clutter and maintain a clean and organized interface.
Variants
None
A clean and minimalistic variant with no border, facilitating a sleek and contemporary look.
Flat
A variant with borders only on the top and bottom, giving a balanced and linear aesthetic.
Rounded Corners with 4px
Offers a modern and smooth appearance, with subtle borders encapsulating the tab.
Rounded Corners with 8px
Provides a more defined boundary with larger rounded corners, fostering a cohesive look with other rounded elements within the system.
Sizes
.tab-small
A compact size for the component, ideal for limited space or subtle emphasis, making it less prominent but still functional and visible.
.tab-medium
The standard size for the component, providing a balance between visibility and space, suitable for most typical use cases and standard interfaces.
.tab-large
A larger size for the component, ensuring it stands out and is easily noticeable, often used for primary actions or important interactions to draw user attention.
States
.tab :enabled
The default state where the component is fully interactive and ready for user actions. It appears normal and invites interaction.
.tab :hover
The state when a user places their cursor over the component, indicating it is ready for interaction and often visually changes to show responsiveness.
.tab :focus
The state showing that the component is currently selected or active, highlighted for user awareness and accessibility purposes, often with a border or shadow.
.tab :*disabled
The state where the component is visible but non-interactive, indicating it is not available for use. It often appears faded or greyed out to signal its inactivity.
Best Practices vs. Common Pitfalls
Do:
Choose a tab style and size that harmonizes with the overall design scheme of your product.
Use the icon lead and badge trail judiciously to enhance the user's ability to navigate through the tabs quickly.
Make sure the tab states are clearly distinguishable to foster a user-friendly experience.
Don't:
Mix different styles and sizes within a single tab group as it may cause visual inconsistency.
Overpopulate the tabs with icons and badges, which might overwhelm the user and clutter the interface.
Forget to test the visibility and readability of text across all states to maintain accessibility.