Hacktron Design System

Switch

A toggle for a single boolean setting that takes effect immediately.

Email notificationsGet notified about new activity
Two-factor authManaged by your organization
Beta featuresNot available on your plan
<template>
  <div class="flex items-center justify-between gap-4">
    <div class="flex flex-col gap-0.5">
      <span class="text-sm font-medium text-text-primary">Email notifications</span>
      <span class="text-xs text-text-tertiary">Get notified about new activity</span>
    </div>
    <Switch v-model="enabled" />
  </div>
</template>

Props

Name Type Default
modelValueboolean
disabledbooleanfalse
loadingbooleanfalse
...propsUSwitch props (color, size, label, description, icon, checkedIcon, uncheckedIcon, ...)

Usage