Toggle

Actions

A pressable button that maintains an on/off state. Lighter than Switch, designed for toolbars and filters.

Props

Prop	Type	Default	Description
`modelValue`	`boolean`	`false`	Pressed state (v-model).
`variant`	`"outline" \| "ghost"`	`"outline"`	Visual style.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size.
`disabled`	`boolean`	`false`	Disables the toggle.

Variants

vue

<script setup>
const pressed = ref(false)
</script>
<template>
  <DsToggle v-model="pressed">Bold</DsToggle>
</template>

Use DsToggleSkeleton as a loading placeholder while content is being fetched.

Small

vue

<DsToggleSkeleton size="sm" />

Medium

vue

<DsToggleSkeleton size="md" />

Large

vue

<DsToggleSkeleton size="lg" />

Button

ToggleGroup