---
components: ["Toggle", "ToggleSkeleton"]
---

<script>
  import { Toggle, ToggleSkeleton } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

### Default (untoggled)

<Toggle labelText="Push notifications" />

### Toggled

<Toggle labelText="Push notifications" toggled />

### Reactive example

<FileSource src="/framed/Toggle/ToggleReactive" />

### on:toggle event

<Toggle labelText="Push notifications" on:toggle={e => console.log(e.detail)} />

### Custom labels

<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />

### Slottable labels

An alternative to the "labelA" and "labelB" props is to use the corresponding named slots.

<Toggle labelText="Push notifications">
  <span slot="labelA" style="color: red">No</span>
  <span slot="labelB" style="color: green">Yes</span>
</Toggle>

### Disabled

<Toggle labelText="Push notifications" disabled />

### Small size

<Toggle size="sm" labelText="Push notifications" />

### Skeleton

<ToggleSkeleton />

### Skeleton (small)

<ToggleSkeleton size="sm" />