Navigation
Tab
A single tab: a pill-shaped button that is filled red when selected and muted grey when not. Normally used inside a Tab Group.
Tab is one option in a set of mutually exclusive views — in the source file, switching the homepage between the kids' courses and the adult courses.
On its own a selected Tab paints its own red pill. In practice you will almost always use it through Tab Group, which lays tabs out in a rounded track and slides a single pill between them.
Do
- Use Tab inside a Tab Group so selection state, keyboard arrows and the sliding pill are handled for you.
- Keep labels to a couple of words — tabs never wrap.
Don't
- Don't use Tab for page-level navigation between routes; use links.
- Don't use more tabs than fit on one row at the narrowest width; the group doesn't scroll.