Toggle

Anatomy

lorem, duis, donec: pressed control, optional indicator, and trigger label swap.

Minimal

    <.toggle class="toggle">
  lorem
</.toggle>

With indicator

    <.toggle class="toggle">
  <:indicator><.heroicon name="hero-bold" /></:indicator>
  Bold
</.toggle>

<.toggle class="toggle">
  <:indicator><.heroicon name="hero-bold" /></:indicator>
  <span class="sr-only">Bold</span>
</.toggle>

With switching trigger

    <.toggle class="toggle" data-toggle-dual-label>
  <span>lorem</span>
  <span data-pressed>donec</span>
</.toggle>