‌
‌

Toggle button

When the action a button invoke is so clear that needs no words, just an icon

Quick nav

Anatomy
API Reference
Accessibility

Features

Keyboard accessible
Focusable even when disabled
Multiple styles and sizes
Two icons state
Themes ready

Links

View source Report an issue ARIA design ARIA authoring

Anatomy

import { ToggleButton } from "@wonderflow/react-components";

export default () => {
  return <ToggleButton restingIcon="play" pressedIcon="pause" />;
};

tsx

API Reference

Property

Type

Default

kind

enum

primary

dimension

enum

regular

restingIcon

enum

pressedIcon

enum

disabled

boolean

pressed

boolean

false

onClick

function

as

enum

button

Accessibility

Adheres to the button role requirements. This component always requires the aria-label or aria-labelledby attributes to describe the action.

Keyboard interactions

tab

Move focus on the element or outside

enter

Trigger the component action