Alnus UI

Toggle

<input type="checkbox" hidden id="toggle-1" />
<label class="toggle" for="toggle-1" tabIndex={0}>
  <IoAlarm />
</label>

Note: .toggle can be activated by &.active, &.checked or :checked + &.

Variants

<button class="toggle">
  <IoAlarm />
</button>
<button class="toggle checked">
  <IoAlarm />
</button>
<button class="toggle toggle-outline">
  <IoAlarm />
</button>
<button class="toggle toggle-outline checked">
  <IoAlarm />
</button>

Sizes

<button class="toggle toggle-outline toggle-sm">
  <IoAlarm />
</button>
<button class="toggle toggle-outline">
  <IoAlarm />
</button>
<button class="toggle toggle-outline toggle-lg">
  <IoAlarm />
</button>
Last update: 3/20/2023, 3:07:51 AM