IToggle ​

A button that stays pressed — bold in an editor, a filter that is either on or off. For a setting rather than an action, use ISwitch.

<script setup lang="ts">
const starred = ref(false)
</script>

<template>
  <IToggle v-model="starred">
    <StarIcon data-icon="inline-start" />
    Starred
  </IToggle>
</template>

Content comes from the default slot, as in IButton — an icon, a label, or both. Mark an icon with data-icon="inline-start" or "inline-end" and the padding tightens on that side.

Sizes ​

The heights match IButton, so the two line up in a toolbar.

<IToggle v-model="value" size="xs">Extra small</IToggle>
<IToggle v-model="value" size="sm">Small</IToggle>
<IToggle v-model="value" size="md">Medium</IToggle>
<IToggle v-model="value" size="lg">Large</IToggle>

Icon-only ​

square drops the horizontal padding, so the icon needs no data-icon mark. With no text to name it, pass an aria-label.

<IToggle v-model="bold" square aria-label="Bold">
  <BoldIcon />
</IToggle>
<IToggle v-model="italic" square aria-label="Italic">
  <ItalicIcon />
</IToggle>

Uncontrolled ​

Leave v-model off and pass default-value to let the toggle keep its own state.

<IToggle default-value>Notifications</IToggle>

Disabled ​

<IToggle :model-value="true" disabled>Pressed</IToggle>
<IToggle :model-value="false" disabled>Not pressed</IToggle>

Props ​

Events ​

Accessibility ​

The toggle renders a <button> carrying aria-pressed, reachable by Tab and operated with Space or Enter. Attributes you set land on that button, so aria-label names the control.