Toggle Button

Pressable toggle control.

Import

import { ToggleButton } from '@heroui-vue/vue'

Usage

<template>
  <div class="flex gap-3">
    <ToggleButton default-selected>Bold</ToggleButton>
    <ToggleButton variant="ghost">Italic</ToggleButton>
    <ToggleButton :is-icon-only="true" aria-label="Star">
      ★
    </ToggleButton>
  </div>
</template>

<script setup>
import { ToggleButton } from '@heroui-vue/vue'
</script>

API

Prop	Type	Default	Description
selected	boolean	undefined	Controlled selected state
defaultSelected	boolean	false	Initial selected state
variant	'default' | 'ghost'	'default'	Visual style