<div class="flex flex-col items-start gap-4">
  <div><Switch>Square</Switch></div>
  <div><Switch round>Round</Switch></div>
  <div><Switch disabled>Disabled</Switch></div>
  <div><Switch inline>"Inline" Square</Switch></div>
  <div><Switch inline round>"Inline" Round</Switch></div>
</div>

<script>
  let hq = false;
</script>

<div>
  <Switch bind:checked={hq}>High Quality</Switch>
</div>
HQ {hq ? 'enabled' : 'disabled'}

<script>
  let tile = {
    on: { label: 'On', background: 'success'},
    off: { label: 'Off', background: 'warning'},
  };
</script>

<div>
  <Switch {tile} />
</div>