Navigation
Tab Group
A sliding-pill tab switch. Tabs sit in a rounded track and one red pill glides to the active tab, sized by measuring it at runtime.
Tab Group switches between a small set of related views without leaving the page. Use it when the choice is either/or and the content beneath is the same kind of thing — the source file uses it to flip the homepage course list between kids and adults.
The selected tab is highlighted by a single red pill that slides from tab to tab. Tab Group renders only the tabs; it doesn't render the panels. Show the matching content yourself and connect the two with controls and the panel's id.
The Figma component has three frames: two tabs with the left one selected, two tabs with the right one selected, and a three-tab frame ("State3"). The three-tab frame also contains a blue, absolutely positioned pill whose label is fully transparent. It looks like an animation helper rather than part of the visible design, so it is not built.
- Give the group an aria-label, and set controls on each tab so it points at its panel.
- Use two or three tabs — the Figma component shows two and three.
- Don't hardcode the pill's width or position. The pill's numbers in Figma only match one viewport and token mode; the component measures the active tab.
- Don't use it for navigation between separate pages.