v14.0.8


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

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

NameDescription
tabMove focus on the element or outside
enterTrigger the component action

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024