ToggleButton Props

Name	Type	Default	Description
label	string	required	Accessible name of the button. It names the control when the default slot supplies visible content, doubles as aria-label in icon-only mode, and is the visible text when nothing else is provided.
isPressed	boolean	false	Whether the button is pressed, bound with v-model:is-pressed. Leave it unbound and the button owns the pressed state, starting unpressed. Inside a ToggleButtonGroup the group owns it and this prop is ignored.
size	'sm' | 'md' | 'lg'	'md'	Button size. It falls back to the size of the enclosing group, then to md.
elevation	'none' | 'low' | 'med' | 'high'	'none'	Resting shadow depth for floating (FAB-style) toggles, matching Button. A grouped button keeps its own elevation.
isDisabled	boolean	false	Disables interaction. A disabled group disables every member, and an enabled group never re-enables a member that disabled itself. With a tooltip the button switches to aria-disabled so focus stays available to read the reason.
isLoading	boolean	false	Shows the loading state: the content gives way to a spinner and aria-busy is set.
isIconOnly	boolean	false	Renders a square, icon-only button that uses label as its accessible name; no label text and no width reservation are rendered.
pressedChangeAction	(isPressed: boolean) => void | Promise<void>	—	Action for an API- or navigation-backed toggle. It runs after pressedChange unless that handler prevents the click default. While it is pending the button previews the next state with a spinner and stays clickable, so another click reverses the unsettled toggle. Ignored for a group member with a value.
tooltip	string	—	Text shown on hover and keyboard focus, usually to name an icon-only toggle.
value	string	—	Value identifier inside a ToggleButtonGroup; the group uses it to decide the pressed state. It is not a form value.

ToggleButtonGroup Props

Name	Type	Default	Description
label	string	required	Accessible name of the group, rendered as aria-label on the role="group" container.
type	'single' | 'multiple'	'single'	Selection mode. single keeps one member pressed and clears on a second click; multiple lets members switch on their own.
value	string | null | string[]	null	The current selection, bound with v-model:value. A string or null in single mode, an array of strings in multiple mode (an empty array when none is pressed).
orientation	'horizontal' | 'vertical'	'horizontal'	Layout direction of the members. A vertical group stretches each member to the full width.
size	'sm' | 'md' | 'lg'	'md'	Size the members inherit; a member with its own size wins.
isDisabled	boolean	false	Disables every member. A member that disables itself stays disabled as well.

Events

Name	Payload	Description
pressedChange	(isPressed: boolean, event: MouseEvent)	The state the click asks for, with the originating click event. Call event.preventDefault() to own the toggle: the component then neither changes the state nor runs pressedChangeAction.
update:isPressed	(isPressed: boolean)	Backs v-model:is-pressed. It is not emitted when the handler prevents the click default.
click	(event: MouseEvent)	The originating click, forwarded after the toggle has been requested. It is not emitted while the button is disabled.
change	(value: string | null | string[])	The group selection: a string or null in single mode, an array in multiple mode.

Slots

Name	Description
default	Visible content. It replaces label as the visible text while label stays the accessible name; with nothing in it, label is rendered.
icon	Decorative icon before the label, or the only content of an icon-only button. Put an icon class in a sized element, such as <span class="i-carbon-filter" style="width: 16px; height: 16px" />, so it matches the button's icon box.
pressedIcon	Icon shown while pressed, typically a filled version of icon. Falls back to icon when empty. The artwork owns its own color, so pass an element that already carries it, such as <span class="i-carbon-stop-filled" style="color: var(--astryx-icon-error-foreground)" />.

ToggleButtonGroup takes its members through the default slot:

Name	Description
default	The ToggleButton members. Each one needs its own value.

Keyboard

Key	Behavior
Tab	Moves through every available toggle; a group does not collapse its members into a single tab stop.
Enter / Space	Toggles the focused button, exactly like a click.

The group does not take over the arrow keys: each member is its own tab stop, so Tab walks them one by one and the arrow keys do not move focus between members — unlike ButtonGroup. Disabled members are skipped, while a disabled member that carries a tooltip stays focusable so its reason can be read.

Template ref

ToggleButton exposes:

• element: HTMLButtonElement | HTMLAnchorElement | HTMLElement | null.
• focus(options?: FocusOptions): focuses the button.
• blur(): removes focus from the button.

Native attributes

The root element is <button type="button">.

It receives:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.
• Native event listeners.

The component sets aria-pressed from the pressed state, and uses data-pressed, data-variant="ghost", and data-size for theming; leave those to the component. In icon-only mode aria-label comes from label.