Swap

Two-face toggle (icon swap)

An on/off control drawn as two icons that trade places — play and pause, like, mute. It is a checkbox underneath, so it is announced as checked or not. For a toggle with a visible text label use Switch or Toggle.

Basic

❚❚▶☾☀♥♡🔇🔈

<script setup lang="ts">
import { ref } from "vue";
import { BlessSwap } from "blessing-ui";
const on = ref(false);
</script>

<template>
  <div class="row" style="gap: 24px; font-size: 28px">
    <BlessSwap v-model="on" label="Playing">
      <template #on>❚❚</template>
      <template #off>▶</template>
    </BlessSwap>
    <BlessSwap label="Dark theme" effect="rotate">
      <template #on>☾</template>
      <template #off>☀</template>
    </BlessSwap>
    <BlessSwap label="Liked" effect="flip">
      <template #on><span style="color: var(--bless-color-accent)">♥</span></template>
      <template #off>♡</template>
    </BlessSwap>
    <BlessSwap label="Muted" disabled>
      <template #on>🔇</template>
      <template #off>🔈</template>
    </BlessSwap>
  </div>
</template>

• label names the on state (Playing, Liked, Muted), because it is read with checked / not checked. "Play / pause" would be read as "Play / pause, checked" and mean nothing.
• #on and #off are hidden from screen readers; the label speaks for them.
• effect: fade (default), rotate, flip. All of them respect reduced motion.

Usage

import { BlessSwap } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
label*	string	—
disabled	boolean	—
effect	"fade" | "rotate" | "flip"	—	how the two faces exchange
modelValue	boolean	false

Events

Name	Payload	Description
update:modelValue	[value: boolean]

Slots

Name	Scope	Description
on	—
off	—