ToggleButton

A toggle button is a button that stays pressed. Use it where the state belongs to the control itself — bold, mute, pin — and the label does not change to describe it. Where the state is a setting in a form, a Checkbox or a Switch says so more plainly.

import { ToggleButton } from "ropav";

variant

 unsetdefaultghost

size

 unsetxssmmdlg

isIconOnly

isDisabled

<ToggleButton>Follow</ToggleButton>

Selection

default-selected starts the button on; is-selected with a change listener hands the state to the caller. Either way the state also reaches the content as a slot prop, which is how the label or the icon can follow it.

toggle-button-selected.vue

<script setup lang="ts">
import { ToggleButton } from "ropav";
import { shallowRef } from "vue";

const isFollowing = shallowRef(false);
</script>

<template>
  <ToggleButton :is-selected="isFollowing" @change="isFollowing = $event">
    <template #default="{ isSelected }">{{ isSelected ? "Following" : "Follow" }}</template>
  </ToggleButton>

  <ToggleButton default-selected variant="ghost">
    <template #default="{ isSelected }">{{ isSelected ? "Pinned" : "Pin" }}</template>
  </ToggleButton>
</template>

Groups

A ToggleButtonGroup joins several into one control with shared selection. Inside one, the group owns selection: each button needs an id to be keyed by, and is-selected and default-selected are ignored, so two buttons can never both think they are on.

Accessibility

• The button reports aria-pressed. Inside a single-selection group it reports role="radio" and aria-checked instead, because a set of mutually exclusive choices is a radio group to assistive technology, and carrying both would describe the button twice.
• A button whose whole content is one icon takes is-icon-only, and needs an aria-label — there is no text left to name it.
• An explicit tabindex is written even though a native button is already tabbable, because Safari does not focus one without it. A disabled button gets none, so it is not reachable at all.

API

Prop	Type	Default	Description
defaultSelected	boolean	—	Selected state in uncontrolled mode. Ignored inside a group, which owns selection.
id	ToggleGroupKey	—	Identifier in the group's selected keys. Required inside a ToggleButtonGroup, where selection is keyed rather than per-button; unused standalone.
isDisabled	boolean	—	Disables the button.
isIconOnly	boolean	—	Renders as a square button sized for a single icon.
isSelected	boolean	—	Selected state in controlled mode. Ignored inside a group, which owns selection.
size	"xs" | "sm" | "md" | "lg"	—	Toggle button size.
type	"button" | "reset" | "submit"	"button"	Native button type.
variant	"default" | "ghost"	—	Toggle button variant.

The default slot receives:

Slot prop	Type
isDisabled	boolean
isFocusVisible	boolean
isHovered	boolean
isPressed	boolean
isSelected	boolean

Event	Payload
change	boolean
click	MouseEvent