HyToggle

An individual toggle button used within an hy-toggle-group. Represents a single selectable option that can be pressed (selected) or unpressed.

Key Features

• Pressed/unpressed visual state
• Prefix and suffix slots for icons
• Size and variant inherited from parent group
• Full keyboard and accessibility support

Accessibility Features

• Role switches between radio (single mode) and button (multiple mode)
• aria-checked or aria-pressed based on selection mode
• Focus delegation via delegatesFocus — parent group manages host tabindex
• High contrast mode support
• Reduced motion support

Examples

Basic usage within a toggle group

<hy-toggle-group value="center">
  <hy-toggle value="left">Left</hy-toggle>
  <hy-toggle value="center">Center</hy-toggle>
  <hy-toggle value="right">Right</hy-toggle>
</hy-toggle-group>

With icon

<hy-toggle value="bold">
  <hy-icon slot="prefix" name="bold"></hy-icon>
  Bold
</hy-toggle>

Slots

• default - Button content (text, icons, or both)
• prefix - Content before the default slot (e.g. icon)
• suffix - Content after the default slot

Methods

focus()

Sets focus on the underlying button element.

blur()

Removes focus from the underlying button element.