Tabs
Back to docsTabs are intentionally minimal in v0.1. Spectra ships the tab container and group shell; apps provide trigger styling, selected-state logic, and panel swapping.
Tabs API
| Class / role | Used for | Notes |
|---|---|---|
.sp-tabs | Tabs root | Simple width wrapper for a tab set. |
.sp-tablist | Trigger group shell | Provides the surfaced row, padding, border, and radius around your tab triggers. |
role="tablist" | ARIA semantics | Apply to the trigger container. |
role="tab" | Each trigger | Use native buttons or links. In this demo, button variants show selected state. |
role="tabpanel" | Each panel | Hide inactive panels in app code. |
Interactive preview
Foundation
The framework shell stays minimal so product teams can adapt tab triggers to their own density and interaction needs.
Components
Use tabs for sibling content that shares one context, not for major navigation between unrelated routes.
Guidance
If triggers need heavy visual treatment, own that at the app layer instead of forcing more states into the base tab shell too early.
Typical markup
<div class="sp-tabs">
<div class="sp-tablist" role="tablist" aria-label="Sections">
<button class="sp-btn sp-btn--ghost sp-btn--sm" role="tab" aria-selected="true" aria-controls="panel-a">A</button>
<button class="sp-btn sp-btn--ghost sp-btn--sm" role="tab" aria-selected="false" aria-controls="panel-b">B</button>
</div>
</div>Guidance
Tabs are a light framework hook right now, not a full app-state component. That keeps the contract honest and leaves room to grow the trigger styling later without breaking consumers.