Toggle

A two-state button that can be either on or off.

Examples

Default

<script setup>
import { Toggle } from '@empathyds/vue'
import { Bold } from 'lucide-vue-next'
</script>

<Toggle aria-label="Toggle bold">
  <Bold class="h-4 w-4" />
</Toggle>

Outline

<script setup>
import { Toggle } from '@empathyds/vue'
import { Bold } from 'lucide-vue-next'
</script>

<Toggle variant="outline" aria-label="Toggle bold">
  <Bold class="h-4 w-4" />
</Toggle>

With Text

<script setup>
import { Toggle } from '@empathyds/vue'
import { Bold } from 'lucide-vue-next'
</script>

<Toggle aria-label="Toggle italic">
  <Bold class="mr-2 h-4 w-4" />
  Bold
</Toggle>

Props

Toggle

Prop	Type	Default	Description
pressed	boolean	-	The controlled pressed state of the toggle.
defaultPressed	boolean	false	The default pressed state of the toggle.
disabled	boolean	false	Whether the toggle is disabled.

Slots

Toggle

Slot	Description
default	The content of the toggle.