Skip to content
DOL Studio

Tabbar, Toggle

Design: Stable Code: Coded navtabssegmented 31 Figma sets 2 standalone .Tabbar/Item/Tab button item line style

Live preview

Line variant — sm / md / lg
Block variant — with leading icon
With count chips + disabled
Icon-only — square block
Stretch align — full width
Info-blue tone (Figma alternative line variant)

Import & files

Import
import { Tabbar, Toggle } from "@dol/ui/tabbar";
Source file
packages/@dol/ui/src/tabbar/Tabbar.tsx

Figma source

Figma source 31 sets
Page
Tabbar, Toggle
Sets
31 + 2 standalone
Primary set
.Tabbar/Item/Tab button item line style · 30 variants Open in Figma →
Showing: .Tabbar/Item/Tab button item line style
11 other sets (+ 19 more not listed)
  • .Action/Content/Sub button icon 24 variants Figma →
  • .Action/Size 45 variants Figma →
  • .Tabbar/indicator/ style 7 variants Figma →
  • .Tabbar/indicator/ use 6 variants Figma →
  • .Tag item/Size 24 variants Figma →
  • abs/view more CTA 4 variants Figma →
  • Button icon secondary/Element tooltip container 4 variants Figma →
  • Tabbar/Block tab button 168 variants Figma →
  • Tabbar/Group/Block style 5 variants Figma →
  • Tabbar/Group/Line style 5 variants Figma →
  • Tabbar/Item/Tab footer item 6 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Tabbar, Toggle
Slug: `tabbar-toggle`
Domain: general · Category: navigation
Design: stable · Code: coded


## Description
Tabbed navigation + segmented controls - 16 sets covering tab line-style buttons, tag items, and icon-secondary tooltips.


## Import
```ts
import { Tabbar, Toggle } from "@dol/ui/tabbar";
```
Source: `packages/@dol/ui/src/tabbar/Tabbar.tsx`


## Figma source
Page: Tabbar, Toggle
Sets: 31
Primary: .Tabbar/Item/Tab button item line style
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=10426-124962

Related

  • L
    lms

    LMS Role Sidebar

    Design only
  • S
    nav

    Sidebar

    Coded
    1. 1
    2. 2
      2
    3. 3
      3

    Steps

    Coded

  • Pagination

    Coded
  • HomeSectionCurrent

    Breadcrumb

    Coded
  • Nav item

    NavItem

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).