Tabs Subtle
Tab navigation with smooth pill animations.
When To Use
- Use Tabs Subtle when you need a reusable atoms pattern instead of rebuilding the structure from primitives.
- Start from the simplest example that fits the task, then add decoration only when it clarifies meaning or hierarchy.
- Review the examples below to understand the tradeoffs between density, emphasis, and behavior.
When Not To Use
- Do not use Tabs Subtle just because it already exists in the catalog; choose the pattern that matches the task, not the most decorative option.
- Do not keep layering options onto the pattern when a simpler component or section would be easier to understand and maintain.
Accessibility Notes
- Mark the current item clearly with visual state and the appropriate ARIA current/selected semantics.
- Ensure arrow-key or tab-key movement stays predictable when the pattern behaves like a composite widget.
- Do not rely on icon-only navigation unless every control has a clear accessible name.
Key Props / API
Props
children, selectedIndex, onSelect, idPrefix, activeLabel, icon
Key exports
TabsSubtle, TabsSubtleItem, TabsSubtlePanel
Basic
Text tabs
Teamspaces content goes here.
With Icons
Icon and label tabs
Teamspaces content goes here.
Active Label
Only the selected icon tab shows text
Teamspaces content goes here.