Tabs

@summonware/ui · tabs · P0 · Core UI

Usage

Switches between sibling views of the same subject without leaving the page. Tabs are peers: if one panel depends on finishing another, that is a Stepper, not a tab strip.
import { Tabs } from '@summonware/ui';

Best practices

DoLabel tabs with nouns — "Details", "Activity", "Notes". A verb suggests an action, not a view.
DoKeep the panels the same subject. Tabs that switch between unrelated things are navigation wearing the wrong component.
Don'tHide required form fields in a non-default tab. They get missed and submit fails with no visible cause.
Don'tGo past about five tabs. Beyond that use a sidebar.

Examples

Common configurations, variations and states.

Line

Order placed 4 March, shipped 6 March.

The default underlined strip, for sections of a record.

Pill

128 tickets.

A segmented control. Better than the line variant when the tabs act as a filter over one list.

Reference variants

2 of 3 labels from the reference are demonstrated above.
Basic TabsBasic PillsVertical Pills

Where it appears

Used on 15 catalogued screens, including admins-course-setting-payment, admins-course-setting-pricing, admins-course-site, admins-invoice-list, application-ec-order-list, application-ec-product-detail and 9 more.