ContentSwitcher

PreviousNext

Segmented view switcher (heading or icon).

import { ContentSwitcher, ContentSwitcherButton } from "@/rl-ui";

<ContentSwitcher value={view} onChange={setView} size={32}>
<ContentSwitcherButton value="list">List</ContentSwitcherButton>
<ContentSwitcherButton value="cards">Cards</ContentSwitcherButton>
</ContentSwitcher>

Examples

Sizes

import { ContentSwitcher, ContentSwitcherButton } from "@/rl-ui";

<>
<ContentSwitcher value="a" onChange={setV} size={24}>
  <ContentSwitcherButton value="a">24</ContentSwitcherButton>
  <ContentSwitcherButton value="b">Alt</ContentSwitcherButton>
</ContentSwitcher>
<ContentSwitcher value="a" onChange={setV} size={32}>
  <ContentSwitcherButton value="a">32</ContentSwitcherButton>
  <ContentSwitcherButton value="b">Alt</ContentSwitcherButton>
</ContentSwitcher>
<ContentSwitcher value="a" onChange={setV} size={40}>
  <ContentSwitcherButton value="a">40</ContentSwitcherButton>
  <ContentSwitcherButton value="b">Alt</ContentSwitcherButton>
</ContentSwitcher>
</>

API

PropTypeDefaultDescription
valuestring—Active segment (required).
onChange(value: string) => void—Change handler (required).
variant"heading" | "icon""heading"Label vs icon-only.
size24 | 32 | 4032Control height in px.