DS-005 · Temporary validation harness

LagoTabs

Every example below renders the real production LagoTabs component.

1. Default Tabs

Standard text tabs for most use cases.

2. Tabs with Icons

Leading Lucide icons for additional context.

3. Tabs with Count Badges

Subtle count badges for related quantities.

4. Secondary / Contextual Tabs

Restrained treatment for secondary tab groups, e.g. inside a card.

Details panel content — trip description, meeting point, and requirements.

5. Disabled Tabs

Disabled tabs are non-interactive and skipped by arrow-key navigation.

6. Navigation Mode

Items with a "to" destination render as semantic links with aria-current="page".

7. Stateful Mode

True ARIA tablist switching an associated tabpanel in place.

Showing content for: overview

8. Desktop PageHeader + Tabs Composition

Tabs within a LagoPageHeader (typical usage).

Sunset Cruise

Manage details, availability, and bookings for this experience.

Showing the overview panel.

9. Mobile Horizontal-Scroll Example

Narrowed container forces overflow — tabs scroll horizontally on one row.