opinion
Tabs
Switch views of one project.
Project tabsUnderline, counts, arrow keys
Identity, site and launch kit for the harbour trust. 84% done, launch 24 Oct.
In context
Project pageTabs under the project header, the task list open
Brand
Harbour rebrand
Maya Chen · due 24 Oct
Draft launch checklistPNDue Fri
Icon auditMCDesign
Harbour homepageMCDesign
Brand paletteMCDesign
Pills
variant pillsEach tab is its own filled pill; they share the row (a view switch). --rebar-tabs-pills-* tokens.
Tabs props
| Prop | Type | Required | Default |
|---|---|---|---|
asChild | boolean | undefined | No | — |
Tab props
| Prop | Type | Required | Default |
|---|---|---|---|
asChild | boolean | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
description | ReactNode | No | — |
Accessibility
Radix tabs: role="tablist", each Tab a role="tab" button with aria-selected and aria-controls, each TabPanel a role="tabpanel". Arrow keys move between tabs, Home and End jump to the ends; a disabled tab is skipped.
data-rebar-* attributes
data-rebar-component="tabs" on the root; data-rebar-part="list" on TabList (with data-rebar-size), "tab" on each Tab, "panel" on each TabPanel.
Migrating to Ant Design
AntD's Tabs takes an items array ({ key, label, children }) rather than JSX children: a real, mechanical restructuring, not a straight prop rename.