Tabs — Counted views beneath a toolbar

A collection heading and add control sit above counted view choices and a short item list. Use when a collection needs both view selection and a nearby creation action.

ReactHTML

1440 × 480

Open in new tab

Component.tsx24 lines

export default function TabsCountedToolbar() {
  return (
    <div className="group w-72 text-neutral-900 sm:w-[28rem]"><div className="flex items-center justify-between gap-3"><h2 className="text-sm font-semibold">Collection views</h2>
    <button className="inline-flex size-8 items-center justify-center rounded-md border border-neutral-300 bg-white hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" type="button" aria-label="Add collection item"><svg className="size-4" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14" /></svg></button></div>
    <div className="mt-3 grid grid-cols-3 border-b border-neutral-200" role="radiogroup" aria-label="Collection view"><label className="flex h-10 items-center justify-center border-b-2 border-transparent px-1 text-xs text-neutral-500 hover:text-neutral-900 has-[:checked]:border-neutral-900 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900" id="tabs-counted-toolbar-incoming-label"><input className="sr-only focus-visible:outline-hidden" id="tabs-counted-toolbar-incoming" name="tabs-counted-toolbar" value="incoming" type="radio" aria-controls="tabs-counted-toolbar-incoming-panel" defaultChecked />
    Incoming<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-900 ml-1.5 px-1.5">8</span></label>
    <label className="flex h-10 items-center justify-center border-b-2 border-transparent px-1 text-xs text-neutral-500 hover:text-neutral-900 has-[:checked]:border-neutral-900 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900" id="tabs-counted-toolbar-sent-label"><input className="sr-only focus-visible:outline-hidden" id="tabs-counted-toolbar-sent" name="tabs-counted-toolbar" value="sent" type="radio" aria-controls="tabs-counted-toolbar-sent-panel"  />
    Sent<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-900 ml-1.5 px-1.5">12</span></label>
    <label className="flex h-10 items-center justify-center border-b-2 border-transparent px-1 text-xs text-neutral-500 hover:text-neutral-900 has-[:checked]:border-neutral-900 has-[:checked]:font-medium has-[:checked]:text-neutral-900 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900" id="tabs-counted-toolbar-saved-label"><input className="sr-only focus-visible:outline-hidden" id="tabs-counted-toolbar-saved" name="tabs-counted-toolbar" value="saved" type="radio" aria-controls="tabs-counted-toolbar-saved-panel"  />
    Saved<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-900 ml-1.5 px-1.5">6</span></label></div>
    <section className="mt-4 hidden group-has-[#tabs-counted-toolbar-incoming:checked]:block" id="tabs-counted-toolbar-incoming-panel" aria-labelledby="tabs-counted-toolbar-incoming-label"><ul className="grid gap-3" role="list"><li className="flex items-center justify-between gap-3 rounded-lg border border-neutral-200 bg-white p-3"><span className="text-sm font-medium text-neutral-900">First incoming item</span>
    <span className="text-xs text-neutral-500">Oct 11</span></li>
    <li className="flex items-center justify-between gap-3 rounded-lg border border-neutral-200 bg-white p-3"><span className="text-sm font-medium text-neutral-900">Second incoming item</span>
    <span className="text-xs text-neutral-500">Oct 10</span></li></ul></section>
    <section className="mt-4 hidden group-has-[#tabs-counted-toolbar-sent:checked]:block" id="tabs-counted-toolbar-sent-panel" aria-labelledby="tabs-counted-toolbar-sent-label"><ul className="grid gap-3" role="list"><li className="flex items-center justify-between gap-3 rounded-lg border border-neutral-200 bg-white p-3"><span className="text-sm font-medium text-neutral-900">First sent item</span>
    <span className="text-xs text-neutral-500">Oct 11</span></li>
    <li className="flex items-center justify-between gap-3 rounded-lg border border-neutral-200 bg-white p-3"><span className="text-sm font-medium text-neutral-900">Second sent item</span>
    <span className="text-xs text-neutral-500">Oct 10</span></li></ul></section>
    <section className="mt-4 hidden group-has-[#tabs-counted-toolbar-saved:checked]:block" id="tabs-counted-toolbar-saved-panel" aria-labelledby="tabs-counted-toolbar-saved-label"><ul className="grid gap-3" role="list"><li className="flex items-center justify-between gap-3 rounded-lg border border-neutral-200 bg-white p-3"><span className="text-sm font-medium text-neutral-900">First saved item</span>
    <span className="text-xs text-neutral-500">Oct 11</span></li>
    <li className="flex items-center justify-between gap-3 rounded-lg border border-neutral-200 bg-white p-3"><span className="text-sm font-medium text-neutral-900">Second saved item</span>
    <span className="text-xs text-neutral-500">Oct 10</span></li></ul></section></div>
  )
}

Pattern notes

When to use: Use for a small collection with a common add action. Choose counted navigation links when views are separate pages. Variations: change collection labels, replace Add with Refresh, or show one summary row per panel.
Hierarchy: Read Collection views and Add collection item, then the counted choices and selected list. View labels use one word, counts at most 3 digits, item titles at most 4 words and dates 6 characters. The panel is named by its radio label.
Responsive: The root grows from 288px to 448px at 640px. All three view choices remain visible, while item titles wrap within flexible list rows if needed.
Layout: A 288px root grows to 448px at sm. Its header aligns a 14px heading with a 32px add button. A three-column counted selector starts 12px below with a bottom divider and 40px choices. The panel begins 16px later and contains two 12px-padded bordered rows with 12px gaps.
States: Incoming starts selected. Its bottom border and medium text indicate selection, and CSS shows only its panel. Radio focus outlines its label; the add button has a standard offset outline and neutral-50 hover fill. Counts describe supplied collection totals.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ Collection views                              [+]    │
│ [Incoming 8]          [Sent 12]         [Saved 6]    │
│ ──────────────────────────────────────────────       │
│ First incoming item                    Oct 11        │
│ Second incoming item                   Oct 10        │
└──────────────────────────────────────────────────────┘

View all

Tabs — Bottom bar with icons
Layout tags: stacked,icons,media,compact
Tabs — Centered period choices and a metric
Layout tags: centered,stacked,numbers,compact
Tabs — Counted links with More menu
Layout tags: row,layered,numbers,compact

Tabs — Counted views beneath a toolbar

Pattern notes

More in Tabs

Tabs — Bottom bar with icons

Tabs — Centered period choices and a metric

Tabs — Counted links with More menu