Tab

Pill

Brand-tinted background on the selected item. Use as the default tab bar for settings and dashboard views.

Pill neutral

Same pill shape as above but with a neutral surface tint instead of the brand colour — lower visual weight.

Segment

Contained segmented-control style. The selected tab rises on a white (light-surface) card with a subtle shadow.

Underline

A bottom border indicator with a full-width divider line beneath the row. Ideal for page-level navigation alongside a section title.

Pill — vertical

Add orientation="vertical" to stack tabs as a left-hand sidebar navigation.

Pill neutral — vertical

Segment — vertical

Underline — vertical