Tabs

Tab bar + panel host: switches between ab-tab children, supports close, reorder, add.

HTML tag: c-e2a7c048642784a9e8f88cdde71294647

When to use

• switch between views at same level
• closable or reorderable document tabs
• workspace with multiple panels

Props

Prop	Type	Default	Description
tabs	Array	“
active_tab_id	String	“
draggable	Boolean	true
show_add_button	Boolean
closable_default	Boolean	false
wrap_headers	Boolean
keep_alive	Boolean	true
indicator_style	String	underline
scroll_buttons	String	never
persist_key	String
density	String	comfortable
appearance	String	ghost
tone	String	neutral
size	String	md
add_button_icon	String	plus
add_button_label	String	Add
is_dragging	Boolean
drag_from	Number	-1
drag_over	Number	-1
tab_selected_appearance	String	outline
tab_selected_tone	String	primary
fit_to_parent	Boolean

Rules

• Define .tabs metadata array AND/OR ab-tab children; bind .active_tab_id.
• tab-activate when selection changes; tab-close-request / tab-closed for closable tabs.
• draggable, keep_alive, show_add_button for advanced UX.
• Use for sibling views at same level — not hierarchical path (breadcrumb) or collapsible sections (accordion).

Events

Event	Detail
tab-activate	tab_id: String
tab-close-request	tab_id: String
tab-closed	tab_id: String
tab-add-request
tab-order-change	order: Array
tab-overflow	canScrollStart: Boolean, canScrollEnd: Boolean
tab-added	tab_id: String, index: Number

Methods

Signature	Description
activateTab(tabId: String, focusHeader: Boolean)
requestClose(tabId: String)
closeTab(tabId: String)
commitReorder(from: Number, to: Number)
addTab(tab: Object, index: Number)
setTabs(tabs: Array)
getState()

What to avoid

Do not use one ab-tab alone. Do not nest ab-tabs for breadcrumb-style hierarchy.

Example

<c-e2a7c048642784a9e8f88cdde71294647 .active_tab_id=${tab} .draggable=${true} @tab-activate=${e => tab = e.detail.tab_id}>...</c-e2a7c048642784a9e8f88cdde71294647>