Tabs

Tabs organize content into separate, easily navigable sections.

Base Components

Overview

Tabs are a UI component that organize content into separate sections, allowing users to navigate between them without leaving the page.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FGl3138LYJ71TKOZEC0F8nJ%2FShipfaster-UI---v2.7.1-(LIVE)%3Fnode-id%3D124-40957%26t%3DpA8X0YmO6d7F2SMU-1

When should you use them?

Use tabs to categorize and present content that is related but needs to be viewed separately, such as different sections of a form or various content categories.

How should you use them?

  • Clearly label each tab to indicate its content.
  • Ensure the active tab is visually distinct.
  • Provide smooth transitions between tab content.
  • Make tabs keyboard accessible and screen reader friendly.
  • Keep the number of tabs manageable to avoid clutter.
Previous

No previous post
Up next

No next post