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" />;
};
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 |