Tab strip

Switching between views of the same thing without leaving the page. TabStrip (packages/ui/src/components/TabStrip.tsx) renders a role="tablist" of real <button role="tab"> rows; classes .acrm-tabs, .acrm-tab (+ .acrm-tabswrap, .acrm-tabsedge, .acrm-tabsbtn) in apps/web/src/ds.css.

It is fully controlled: tabs, value, onChange. A tab is { key, label, icon?, count? } — there is no children API and no disabled tab.

When to use

• Sections of one record or one page that share a context: Přehled / Aktivita / Úkoly.
• Where switching is cheap and the user is expected to move back and forth.

When not to use

• Choosing a value that the screen then acts on — that is Segmented control (.acrm-segmented), which is a choice, not navigation.
• Moving between different things — that is the sidebar.
• More tabs than a person can hold in their head; past roughly eight, the record needs an overflow (Record tabs) or a different structure.
• A single tab: a strip with one tab is a heading with extra steps.

Anatomy

• Wrapper .acrm-tabswrap holds the strip and the two fade edges.
• Strip .acrm-tabs: role="tablist", a horizontal row that scrolls natively (overflow-x: auto, scrollbar hidden).
• Tab .acrm-tab: optional icon, label, optional count .cnt; the active tab adds .active and the 2px underline .acrm-tab.active::after.
• Overflow: the component measures the scroll position itself and turns on .acrm-tabsedge.on — a gradient fade plus a chevron .acrm-tabsbtn that nudges by ~60 % of the visible width. Re-measured on scroll and on resize.
• There is no overflow menu in the primitive; Record tabs adds one.

Best practices

Do

• Keep labels short — the strip is a row, not a paragraph.
• Show a count where the number tells the user whether to go there (Úkoly 3, Pošta 12).
• Keep the active tab in sync with what is below; the strip is controlled and shows only what it is given.
• Let long strips scroll; the fade and the chevron say there is more.

Don't

• Disable a tab — the component has no such state; leave it out or show it empty.
• Put an action in the strip (a "+" tab); actions belong to the bar above.
• Nest a second strip under the first.
• Duplicate the record's identity as the first tab.

Content

• Nouns in sentence case: Přehled, Aktivita, Poznámky.
• The count is a bare number, no parentheses and no "of".

Related

• record-tabs — this strip plus overflow and a personal tab layout.
• segmented-control — a choice, not navigation.
• section-top-bar — the bar the strip sits under.
• Stories: components--tab-strip--default, --variants, --states, --with-icon-and-kbd, --composition; legacy overview components--tabs-record-sub-nav-.