diff --git a/playground-vue/src/app.vue b/playground-vue/src/app.vue
index cc2e69d572..52bd4e74d6 100644
--- a/playground-vue/src/app.vue
+++ b/playground-vue/src/app.vue
@@ -64,6 +64,7 @@ const components = [
   'textarea',
   'timeline',
   'toast',
+  'toggle',
   'tooltip',
   'tree'
 ]
diff --git a/playground/app/app.vue b/playground/app/app.vue
index 7348fbd70f..ed569d4eb0 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -64,6 +64,7 @@ const components = [
   'textarea',
   'timeline',
   'toast',
+  'toggle',
   'tooltip',
   'tree'
 ]
diff --git a/playground/app/pages/components/toggle.vue b/playground/app/pages/components/toggle.vue
new file mode 100644
index 0000000000..11b77de156
--- /dev/null
+++ b/playground/app/pages/components/toggle.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import theme from '#build/ui/button'
+
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+const colors = Object.keys(theme.variants.color) as Array<keyof typeof theme.variants.color>
+const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
+
+const state = ref(false)
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 items-center">
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="size in sizes"
+        :key="size"
+        v-model="state"
+        icon="i-lucide-x"
+        :size="size"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="size in sizes"
+        :key="size"
+        v-model="state"
+        label="toggle"
+        icon="i-lucide-x"
+        :size="size"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="color in colors"
+        :key="color"
+        v-model="state"
+        icon="i-lucide-x"
+        :color="color"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="color in colors"
+        :key="color"
+        v-model="state"
+        icon="i-lucide-x"
+        :active-color="color"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="variant in variants"
+        :key="variant"
+        v-model="state"
+        icon="i-lucide-x"
+        :variant="variant"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="variant in variants"
+        :key="variant"
+        v-model="state"
+        icon="i-lucide-x"
+        :active-variant="variant"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="size in sizes"
+        :key="size"
+        v-model="state"
+        icon="i-lucide-x"
+        :size="size"
+        class="rounded-none"
+      />
+    </div>
+    <div class="flex items-center gap-1.5">
+      <UToggle
+        v-for="size in sizes"
+        :key="size"
+        v-model="state"
+        icon="i-lucide-x"
+        :size="size"
+        :ui="{ base: 'rounded-none' }"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/runtime/components/Toggle.vue b/src/runtime/components/Toggle.vue
new file mode 100644
index 0000000000..36956deefa
--- /dev/null
+++ b/src/runtime/components/Toggle.vue
@@ -0,0 +1,74 @@
+<script lang="ts">
+import { useForwardProps, type ToggleProps as RekaToggleProps } from 'reka-ui'
+import type { ButtonProps } from './Button.vue'
+
+export interface ToggleProps extends
+  Pick<RekaToggleProps, 'disabled' | 'name' | 'required' | 'defaultValue'>,
+  Pick<ButtonProps, 'label' | 'icon' | 'trailingIcon' | 'color' | 'variant' | 'activeColor' | 'activeVariant' | 'size' | 'class' | 'ui'> {
+  as?: any
+  loading?: boolean
+}
+
+export type ToggleEmits = {
+  change: [payload: Event]
+}
+</script>
+
+<script setup lang="ts">
+import { useId } from 'vue'
+import { reactivePick } from '@vueuse/core'
+import { useFormField } from '../composables/useFormField'
+import { Toggle } from 'reka-ui'
+
+defineOptions({ inheritAttrs: false })
+const props = withDefaults(defineProps<ToggleProps>(), {
+  color: 'neutral',
+  variant: 'soft',
+  activeVariant: 'solid'
+})
+const emits = defineEmits<ToggleEmits>()
+
+const modelValue = defineModel<boolean>({ default: undefined })
+
+const rootProps = useForwardProps(reactivePick(props, 'required', 'defaultValue'))
+
+const { id: _id, emitFormChange, emitFormInput, size, name, disabled, ariaAttrs } = useFormField<ToggleProps>(props)
+
+const id = _id.value ?? useId()
+
+function onUpdate(value: boolean) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+</script>
+
+<!-- eslint-disable vue/no-template-shadow -->
+<template>
+  <Toggle
+    :id="id"
+    v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    v-model="modelValue"
+    as-child
+    :name="name"
+    :disabled="disabled"
+    @update:model-value="onUpdate"
+  >
+    <template #default="{ modelValue }">
+      <UButton
+        :icon="icon"
+        :label="label"
+        :color="color"
+        :variant="variant"
+        :active-color="activeColor"
+        :active-variant="activeVariant"
+        :active="modelValue"
+        :size="size"
+        :class="[props.class]"
+        :ui="ui"
+      />
+    </template>
+  </Toggle>
+</template>
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index f413b71caa..d5b9c5a826 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -50,6 +50,7 @@ export * from '../components/Textarea.vue'
 export * from '../components/Timeline.vue'
 export * from '../components/Toast.vue'
 export * from '../components/Toaster.vue'
+export * from '../components/Toggle.vue'
 export * from '../components/Tooltip.vue'
 export * from '../components/Tree.vue'
 export * from './form'
diff --git a/test/components/Toggle.spec.ts b/test/components/Toggle.spec.ts
new file mode 100644
index 0000000000..4cb636e760
--- /dev/null
+++ b/test/components/Toggle.spec.ts
@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest'
+import Toggle from '../../src/runtime/components/Toggle.vue'
+import type { ToggleProps } from '../../src/runtime/components/Toggle.vue'
+import ComponentRender from '../component-render'
+import theme from '#build/ui/button'
+
+describe('Toggle', () => {
+  const sizes = Object.keys(theme.variants.size) as any
+  const variants = Object.keys(theme.variants.variant) as any
+  const colors = Object.keys(theme.variants.color) as any
+
+  it.each([
+    // Props
+    ['with label', { props: { label: 'Toggle' } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Toggle', size } }]),
+    ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { label: 'Toggle', variant } }]),
+    ...colors.map((color: string) => [`with neutral color ${color}`, { props: { label: 'Toggle', color } }]),
+    ['with icon', { props: { icon: 'i-lucide-rocket' } }],
+    ['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
+    ['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
+    ['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-arrow-right' } }],
+    ['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
+    ['with class', { props: { label: 'Toggle', class: 'rounded-none' } }],
+    ['with ui', { props: { label: 'Toggle', ui: { base: 'rounded-none' } } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ToggleProps }) => {
+    const html = await ComponentRender(nameOrHtml, options, Toggle)
+    expect(html).toMatchSnapshot()
+  })
+})
diff --git a/test/components/__snapshots__/Toggle-vue.spec.ts.snap b/test/components/__snapshots__/Toggle-vue.spec.ts.snap
new file mode 100644
index 0000000000..8db569ea60
--- /dev/null
+++ b/test/components/__snapshots__/Toggle-vue.spec.ts.snap
@@ -0,0 +1,206 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Toggle > renders with class correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated rounded-none">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with icon correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <!--v-if-->
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with label correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with leading and icon correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <!--v-if-->
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with leadingIcon correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+  <!--v-if-->
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color error correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-error bg-error/10 hover:bg-error/15 active:bg-error/15 focus:outline-none focus-visible:bg-error/15 disabled:bg-error/10 aria-disabled:bg-error/10">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color info correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-info bg-info/10 hover:bg-info/15 active:bg-info/15 focus:outline-none focus-visible:bg-info/15 disabled:bg-info/10 aria-disabled:bg-info/10">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color neutral correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color primary correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color secondary correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-secondary bg-secondary/10 hover:bg-secondary/15 active:bg-secondary/15 focus:outline-none focus-visible:bg-secondary/15 disabled:bg-secondary/10 aria-disabled:bg-secondary/10">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color success correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-success bg-success/10 hover:bg-success/15 active:bg-success/15 focus:outline-none focus-visible:bg-success/15 disabled:bg-success/10 aria-disabled:bg-success/10">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color warning correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-warning bg-warning/10 hover:bg-warning/15 active:bg-warning/15 focus:outline-none focus-visible:bg-warning/15 disabled:bg-warning/10 aria-disabled:bg-warning/10">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with primary variant ghost correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with primary variant link correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with primary variant outline correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with primary variant soft correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with primary variant solid correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with primary variant subtle correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with size lg correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with size md correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with size sm correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with size xl correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with size xs correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with trailing and icon correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5">
+  <!--v-if-->
+  <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with trailingIcon correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"></button>
+<!---->"
+`;
+
+exports[`Toggle > renders with ui correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated rounded-none">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
diff --git a/test/components/__snapshots__/Toggle.spec.ts.snap b/test/components/__snapshots__/Toggle.spec.ts.snap
new file mode 100644
index 0000000000..77e1a6764c
--- /dev/null
+++ b/test/components/__snapshots__/Toggle.spec.ts.snap
@@ -0,0 +1,203 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Toggle > renders with class correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated rounded-none">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with icon correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:rocket shrink-0 size-5" aria-hidden="true"></span>
+  <!--v-if-->
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with label correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with leading and icon correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
+  <!--v-if-->
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with leadingIcon correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"></button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color error correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-error bg-error/10 hover:bg-error/15 active:bg-error/15 focus:outline-none focus-visible:bg-error/15 disabled:bg-error/10 aria-disabled:bg-error/10">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color info correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-info bg-info/10 hover:bg-info/15 active:bg-info/15 focus:outline-none focus-visible:bg-info/15 disabled:bg-info/10 aria-disabled:bg-info/10">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color neutral correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color primary correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-primary bg-primary/10 hover:bg-primary/15 active:bg-primary/15 focus:outline-none focus-visible:bg-primary/15 disabled:bg-primary/10 aria-disabled:bg-primary/10">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color secondary correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-secondary bg-secondary/10 hover:bg-secondary/15 active:bg-secondary/15 focus:outline-none focus-visible:bg-secondary/15 disabled:bg-secondary/10 aria-disabled:bg-secondary/10">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color success correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-success bg-success/10 hover:bg-success/15 active:bg-success/15 focus:outline-none focus-visible:bg-success/15 disabled:bg-success/10 aria-disabled:bg-success/10">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with neutral color warning correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-warning bg-warning/10 hover:bg-warning/15 active:bg-warning/15 focus:outline-none focus-visible:bg-warning/15 disabled:bg-warning/10 aria-disabled:bg-warning/10">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with primary variant ghost correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with primary variant link correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with primary variant outline correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-default hover:bg-elevated active:bg-elevated disabled:bg-default aria-disabled:bg-default focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with primary variant soft correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with primary variant solid correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-inverted bg-inverted hover:bg-inverted/90 active:bg-inverted/90 disabled:bg-inverted aria-disabled:bg-inverted focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-inverted">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with primary variant subtle correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 ring ring-inset ring-accented text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated focus:outline-none focus-visible:ring-2 focus-visible:ring-inverted">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with size lg correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with size md correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with size sm correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with size xl correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with size xs correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with trailing and icon correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"><span class="iconify i-lucide:arrow-right shrink-0 size-5" aria-hidden="true"></span>
+  <!--v-if-->
+  <!--v-if-->
+</button>
+<!---->"
+`;
+
+exports[`Toggle > renders with trailingIcon correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated p-1.5"></button>
+<!---->"
+`;
+
+exports[`Toggle > renders with ui correctly 1`] = `
+"<button type="button" aria-pressed="false" data-state="off" id="v-0-0" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default bg-elevated hover:bg-accented/75 active:bg-accented/75 focus:outline-none focus-visible:bg-accented/75 disabled:bg-elevated aria-disabled:bg-elevated rounded-none">
+  <!--v-if--><span class="truncate">Toggle</span>
+  <!--v-if-->
+</button>
+<!---->"
+`;