actions

Toggle button

Switch between two states indicated by icons.

Features

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

Links

Open in playground Open in Storybook View source 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

squared

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

Name	Description
`tab`	Move focus on the element or outside
`enter`	Trigger the component action