Toggle

A two-state button that can be either on or off.
stableView sourceReka UI
vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { Toggle } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <Toggle>
      <Icon icon="lucide:heart" />
    </Toggle>
  </div>
</template>

API Reference ​

PropDefaultType
color
–
Color

Overrides the accent color inherited from the Theme.

highContrast
–
boolean

Uses a higher contrast color for the component.

radius
–
"none""small""medium""large""full"

Overrides the radius inherited from the theme.

size"2"
"1""2""3"

Control the size of the toggle.

variant"soft"
"solid""soft""ghost"

The visual variant to apply.

Examples ​

Size ​

vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { Toggle } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <Toggle size="1">
      <Icon icon="lucide:heart" />
    </Toggle>
    <Toggle size="2">
      <Icon icon="lucide:heart" />
    </Toggle>
    <Toggle size="3">
      <Icon icon="lucide:heart" />
    </Toggle>
  </div>
</template>

Variant ​

vue
<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { Toggle } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <Toggle variant="solid" :default-value="true">
      <Icon icon="lucide:heart" />
    </Toggle>
    <Toggle variant="soft" :default-value="true">
      <Icon icon="lucide:heart" />
    </Toggle>
    <Toggle variant="ghost">
      <Icon icon="lucide:heart" />
    </Toggle>
  </div>
</template>