Brand

Brand switcher

The Coach and Coach Outlet tabs in the charcoal bar above the header. The current store is the white tab that joins the page.

components/coach/brand-switcher.tsx

Examples

Coach active
Outlet active

Anatomy

  1. 01Charcoal bar, #333
  2. 02Tabs with 4px top corners
  3. 03Wordmark at 10px; OUTLET in Helvetica caps

Usage

components/coach/brand-switcher.tsx
import { BrandSwitcher } from "@/components/coach/brand-switcher";

<div className="flex h-9 items-stretch justify-center bg-coach-charcoal">
  <BrandSwitcher active="coach" />
</div>

Props

PropTypeDefaultDescription
active"coach" | "outlet""coach"Which store this page belongs to. It gets the white tab and aria-current.
classNamestring—Merged last, so it can override layout. Keep brand styling in the component.

Guidance

Do

  • Give the bar a fixed height and let the tabs stretch to it, so the active tab meets the header.

Don't

  • Use it as general tabs. It only switches between the two stores.

Where it's used