Figma horizontal tabs components

Tabs turn up in the same few places: a product page splitting Overview from Specs and Reviews, a dashboard slicing one chart into day, week and month, a profile with Posts and Media, an admin screen holding six sections that all describe the same record.

The pattern makes one strict promise. Only one panel is visible at a time, so a person has to guess from a one word label what sits behind the others, and be right.

When the content wanted to be one page

Tabs are cheap to add and expensive to get wrong, because anything not on screen may as well not exist. Nielsen Norman Group's guidance sets the conditions plainly: few sections, labels short enough to read without stopping, and no task that asks people to compare two panels against each other.

That last condition is the useful test. If someone has to click between Pricing and Features to answer a single question, the tabs are taxing them and the content wanted to be one scrolling page with headings.

There is a second trap worth naming. A strip that changes the URL and loads a different view is navigation dressed as a tab, and it orients people faster when it sits with the breadcrumbs and the page header rather than pretending the sections are one document.

Five types, two sizes, and a full width switch

The set gives you five looks for the same control: an underline strip, brand and gray filled buttons, a minimal text row, and a bordered version that wraps the row in its own container. Sizes are sm and md.

On desktop the underline row is 32px tall at sm and 36px at md, the filled and minimal rows are 36px and 44px, and the bordered version runs taller at 44px and 56px because the container adds padding of its own.

Full width is a boolean rather than a size: switched off, the tabs hug their labels and sit left aligned; switched on, they split the container evenly, which is what you want when the strip spans a card or a table header. Every combination is drawn at a 1,280px desktop measure and again at 343px for mobile, where the md variants settle at 40px instead of 44px.

The strip that does not fit

A horizontal row has a hard ceiling and it arrives sooner than most designs admit. Seven labels at 343px means either horizontal scrolling or truncation, and a tab you have to scroll to find is a tab most people never open.

If the section list is long, or the labels are phrases rather than words, move to vertical tabs, where a fourteenth item costs one more row. The settings page examples show the same screens built both ways, which makes the tradeoff easy to judge before you commit.

States and the keyboard contract

Under the strip sits a shared tab button base carrying a Current property with default, hover and focus states at both sizes, which is why every type in the set has a real focus ring instead of borrowing the hover style. It matters more here than on most components, because the W3C tabs pattern puts one Tab stop on the whole strip and moves between tabs with the left and right arrow keys, so the focus ring is the only thing telling a keyboard user where they are.

In Figma, wiring a click from one Current state to the other with interactive components gets the strip switching in a prototype without a connection per instance.

When it is time to build, the same strip exists in code. Untitled UI React tabs are open source, built with Tailwind CSS and React Aria, with arrow key navigation, the roving tab stop and panel labelling handled for you.