Tabs

About

An animated tab bar with an indicator that glides smoothly between the selected tab and the previous one.

variant: primary (default, sliding white pill over a gray container) or secondary (blue underline with a bottom divider)
mode: hug (default, each tab sized to its intrinsic width, scrolls horizontally if it doesn't fit) or fill (each tab shares the available space equally)
tabs (short constructor): a list of String, each one becoming a default tab
KasyTabs.items (full constructor): a list of KasyTabItem, which supports icon, enabled (disables the tab), and semanticLabel
selectedIndex / onTabSelected: the active index and selection callback

In fill mode with an icon + label, the layout stacks the icon above the text (column) instead of side by side.

Loading the component…

Last updated on 11/03/2026