Tab

Single tab panel: label/icon in header (when inside ab-tabs) and default slot for panel body.

HTML tag: c-e2bf15016c3ba4ba6b12599df2aab7237

When to use

• one tab panel inside ab-tabs
• tab body content slot
• not a tab bar by itself

Props

Prop	Type	Default	Description
tab_id	string
label	string
icon	string
closable	boolean
disabled	boolean
badge	string
tooltip	string
fit_to_parent	boolean

Rules

• Always child of ab-tabs — do not use standalone for switching views.
• Set tab_id, label, optional icon (mi:), closable, disabled, badge.
• Panel content goes in default slot.
• Activation events come from parent ab-tabs (tab-activate), not from ab-tab.

What to avoid

Do not build tab bars from multiple ab-tab without ab-tabs parent. Do not use ab-accordion for the same UX.

Example

<c-e2a7c048642784a9e8f88cdde71294647 .tabs=${tabDefs} .active_tab_id=${active}>
  <c-e2bf15016c3ba4ba6b12599df2aab7237 tab_id="a" .label=${'Overview'}>...</c-e2bf15016c3ba4ba6b12599df2aab7237>
</c-e2a7c048642784a9e8f88cdde71294647>