SwitchIcon

An icon toggle component that smoothly transitions between two icons. Commonly used for favorites, likes, dark mode toggle, and similar scenarios.

Basic Usage

Use v-model for two-way binding. iconOff specifies the off-state icon and iconOn the on-state icon — both accept icon component references from @tabler/icons-vue.

Show Code

<script setup lang="ts">
import { ref } from 'vue'
import { TSwitchIcon } from '@gulcc/tabler-vue'
import { IconHeart } from '@tabler/icons-vue'

const active = ref(false)
</script>

<template>
  <TSwitchIcon v-model="active" :iconOff="IconHeart" :iconOn="IconHeart" colorOff="secondary" colorOn="red" />
</template>

Different Icon Transitions

iconOff and iconOn can use entirely different icon components, perfect for dark mode toggle, notification toggle, etc.

Show Code

<TSwitchIcon
  v-model="active"
  :iconOff="IconSun"
  :iconOn="IconMoon"
  colorOff="yellow"
  colorOn="indigo"
  aria-label="Toggle dark mode"
/>

Color Customization

Use colorOff and colorOn to control the Tabler text color classes for off and on states respectively.

Show Code

<TSwitchIcon v-model="active" :iconOff="IconStar" :iconOn="IconStar" colorOff="secondary" colorOn="yellow" />
<TSwitchIcon v-model="active" :iconOff="IconBulb" :iconOn="IconBell" colorOff="muted" colorOn="orange" />

Animation Variants

Use the variant prop to set the transition animation. Tabler provides 9 built-in animation effects.

Show Code

<TSwitchIcon variant="fade" :iconOff="IconHeart" :iconOn="IconHeart" colorOff="secondary" colorOn="red" />
<TSwitchIcon variant="scale" :iconOff="IconStar" :iconOn="IconStar" colorOff="secondary" colorOn="yellow" />
<TSwitchIcon variant="flip" :iconOff="IconHeart" :iconOn="IconHeart" colorOff="secondary" colorOn="red" />
<TSwitchIcon variant="slide-up" :iconOff="IconCircle" :iconOn="IconCircleFilled" colorOff="secondary" colorOn="primary" />
<TSwitchIcon variant="slide-down" :iconOff="IconCircle" :iconOn="IconCircleFilled" colorOff="secondary" colorOn="primary" />

Disabled

When disabled is set, the icon toggle becomes non-interactive. Both mouse and keyboard operations are blocked.

Show Code

<TSwitchIcon v-model="active" :iconOff="IconHeart" :iconOn="IconHeart" colorOff="secondary" colorOn="red" disabled />

API

Props

Prop	Type	Default	Description
v-model / modelValue	boolean	false	Current toggle state
iconOff	Component	—	Off-state icon component, from @tabler/icons-vue
iconOn	Component	—	On-state icon component, from @tabler/icons-vue
colorOff	string	'secondary'	Tabler text color class for off state
colorOn	string	'red'	Tabler text color class for on state
variant	'fade' | 'scale' | 'flip' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-start' | 'slide-right' | 'slide-end'	—	Transition animation variant (no animation if omitted)
disabled	boolean	false	Whether the toggle is disabled
ariaLabel	string	'Toggle switch'	Accessible aria-label

Emits

Event	Arguments	Description
update:modelValue	(value: boolean)	v-model update event

Slots

None. Icons are passed via props as component references.