Contained, text only
Best suited as the primary organisational element on landing pages, product pages, and marketing contexts where the tabs are supposed to carry significant visual weight.
Contained, with icons
Use when tabs benefit from a recognisable icon to aid scanning, particularly in contexts where users skim rather than read (e.g., product category switching on e-commerce pages).
Contained, Centered Theme
Use sparingly for hero-level content switching where the tab set is the centrepiece of the page and benefits from visual symmetry (e.g. campaign landing pages or single-product showcases where the tabs themselves are a design moment).
Contained, with badge
Minimal, Default
Use where the tab set should recede visually behind the content it controls. Ideal for switching between details, specifications, and reviews within a product page, or organising dashboard sections where the surrounding UI is already dense.
Minimal, Compact
Use in space-constrained containers like cards, side panels, or dashboard widgets where maximising visible tabs matters more than breathing room.
Minimal, Default, with icons
Use when the minimal layout benefits from icons to aid scanning, particularly in application contexts with similarly-worded tab where an icon creates faster visual differentiation.
Minimal, Compact, with icons
Same rationale as above, but for space-constrained containers.