Toggle

A pressable on/off button.

<script setup lang="ts">
import { Toggle } from '@shardsui/vue/toggle'
</script>

<template>
  <Toggle
    v-slot="{ pressed }"
    aria-label="Bookmark"
    class="flex size-9 items-center justify-center rounded-md border border-gray-200 bg-gray-50 text-gray-600 select-none hover:bg-gray-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-gray-950 active:bg-gray-200 data-pressed:text-gray-900"
  >
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" class="size-5">
      <path
        d="M19.25 20.2515V5.75C19.25 4.09315 17.9069 2.75 16.25 2.75H7.75C6.09315 2.75 4.75 4.09315 4.75 5.75V20.2515C4.75 21.0522 5.64414 21.5281 6.30839 21.081L10.3248 18.3776C11.3376 17.6959 12.6624 17.6959 13.6752 18.3776L17.6916 21.081C18.3559 21.5282 19.25 21.0522 19.25 20.2515Z"
        :fill="pressed ? 'currentColor' : 'none'"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </Toggle>
</template>

Anatomy

<script setup>
import { Toggle } from '@shardsui/vue/toggle'
</script>

<template>
  <Toggle />
</template>

To let several toggles share a selection, wrap them in a Toggle Group.

API reference

Prop	Type	Default
`as`	`keyof HTMLElementTagNameMap`	`'button'`

`class`	`string`	—

`style`	`string`	—

`pressed`	`boolean`	`false`

`disabled`	`boolean`	`false`

`value`	`string`	auto

`update:pressed`	`(pressed: boolean) => void`	—

`default`	`Slot<{ pressed, disabled }>`	—

Attribute	Description
`data-pressed`	Present when the toggle is pressed.
`data-disabled`	Present when the toggle is disabled.