---
components: ["ContentSwitcher", "Switch"]
---

<script>
  import { ContentSwitcher, Switch } from "carbon-components-svelte";
  import Bullhorn16 from "carbon-icons-svelte/lib/Bullhorn16";
  import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
  import Preview from "../../components/Preview.svelte";
</script>

### Default

<ContentSwitcher>
  <Switch text="Latest news" />
  <Switch text="Trending" />
</ContentSwitcher>

### Initial selected index

<ContentSwitcher selectedIndex={1}>
  <Switch text="Latest news" />
  <Switch text="Trending" />
  <Switch text="Recommended" />
</ContentSwitcher>

### Reactive example

<FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />

### Light variant

<ContentSwitcher light>
  <Switch text="Latest news" />
  <Switch text="Trending" />
</ContentSwitcher>

### Custom switch slot

<ContentSwitcher>
  <Switch>
    <div style="display: flex; align-items: center;">
      <Bullhorn16 style="margin-right: 0.5rem;" /> Latest news
    </div>
  </Switch>
  <Switch>
    <div style="display: flex; align-items: center;">
      <Analytics16 style="margin-right: 0.5rem;" /> Trending
    </div>
  </Switch>
</ContentSwitcher>

### Extra-large size

<ContentSwitcher size="xl">
  <Switch text="All" />
  <Switch text="Archived" />
</ContentSwitcher>

### Small size

<ContentSwitcher size="sm">
  <Switch text="All" />
  <Switch text="Archived" />
</ContentSwitcher>

### Disabled

<ContentSwitcher>
  <Switch disabled text="All" />
  <Switch disabled text="Archived" />
</ContentSwitcher>