Tab Button
Tab buttons allow users to navigate between different views or sections within the same context.
Last updated
Tab buttons allow users to navigate between different views or sections within the same context.
Last updated
Tab buttons offer a simplified way for users to switch between different content areas within the same page, allowing users to quickly access and manage related views without leaving the current interface.
Use Tab buttons when you need to organize content into categories or sections within the same page or interface.
Tab buttons are ideal when you want to enable users to access different content without reloading or navigating to a new page.
Use Tab buttons to keep users focused within a specific area of the interface, allowing them to toggle between relevant content or features.
When designing a nav bar, use the Light or Subtle style and activate line in the properties section.
Avoid using Tab buttons for navigating between entirely different pages or sections of a website. Use navigation tabs or a sidebar menu instead.
If the content hierarchy is complex and deep, with multiple sub-levels, avoid Tab buttons as they might overwhelm users. Consider using an accordion or nested menus instead.
Do not use Tab buttons if each section contains only minimal content that doesn't require categorization. A simple layout or scrolling view would be more appropriate.
Accent Button
Visually distinct buttons to highlight key actions within an interface
Primary Button
For the important actions users can take.
Nav Bar
Used for quick navigation within a toolbar or menu.
Button Container: The primary structure holding the icon and text, defining the button's shape.
Icon Leading: An optional icon positioned before the text, indicating the tab's function.
Text: The descriptive text that communicates the purpose of the tab.
Icon Trailing: An optional icon placed after the text, often used for additional actions.
Small
14
16
32
Medium
16
20
40
Large
18
24
48
Huge
22
32
60
Keyboard Navigation: Ensure tab buttons are fully navigable via keyboard. Users should be able to move between tabs using the arrow keys and activate a tab using the "Enter" or "Space" key.
Focus States: Clearly define and style focus states for tab buttons to ensure they are visible and accessible for users who rely on keyboard navigation.
Loading Indicators: If loading time is significant when switching tabs, consider using a loading indicator or spinner within the tab content area to enhance the user experience.
Tab Button Labels: Keep tab button labels concise and clear, ideally one to two words that accurately describe the content within that tab.
Email Application: In an email app, tab buttons are used to navigate between "Inbox," "Sent," "Drafts," and "Spam," allowing users to easily manage their emails without leaving the main interface.
E-Commerce Product Categories: In an e-commerce app, tab buttons allow users to switch between different product categories like "Clothing," "Electronics," and "Home Goods" within the same page.
Profile Settings: On a user's profile page, tab buttons can separate "Profile Information," "Security Settings," and "Connected Accounts" for easy access to different settings.
Project Management Tool: In a project management app, tab buttons can be used to navigate between "Overview," "Tasks," "Calendar," and "Files" within a single project interface.
