Content switcher

Content switchers allow users to toggle between alternate views of similar or related content, showing only one content section at a time.

Content switchers are frequently used to narrow large content groups or to sort related content.

Using tabs instead of a content switcher when navigating between distinct content areas like subpages.

For binary actions or choices, such as “yes/no” or “on/off,” use a toggle instead of a content switcher.

Placement

Place the content switcher above the content area to create a clear hierarchy for the section it controls. The switcher can be aligned to the left or right of the content area.

Variants

Interactive states

The content switcher has two interactive states — hover and focus

Selected

Unselected

Hover. color-brand-300 / heading-6

Focus selected.
- Stroke: #4297F2 / 3px

Focus unselected
-- Stroke: #4297F2 / 3px

Disabled state transparency 50%