---
title: "Switch"
description: "Switch with sizes and variants"
source: "Equality"
---
import { SwitchDemo } from "@demo/components/demo/switch";

## Size Variants

### Small

<SwitchDemo client:only="react" variant="small" />

### Medium (Default)

<SwitchDemo client:only="react" variant="medium" />

### Large

<SwitchDemo client:only="react" variant="large" />

## With Thumb Icon

<SwitchDemo
  client:only="react"
  thumbIcon="X"
  thumbIconChecked="Check"
  variant="default"
/>

## States

### Default Off

<SwitchDemo client:only="react" variant="default-off" />

### Default On

<SwitchDemo client:only="react" variant="default-on" />

### Disabled Off

<SwitchDemo client:only="react" variant="disabled-off" />

### Disabled On

<SwitchDemo client:only="react" variant="disabled-on" />

## Variants

### Default

<SwitchDemo client:only="react" variant="default" />

### Danger

<SwitchDemo client:only="react" variant="danger" />