v12.11.0


actions

Icon button

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

Features

  • Keyboard accessible
  • Focusable even when disabled
  • Multiple styles and sizes
  • Themes ready

Anatomy

import { IconButton } from "@wonderflow/react-components";
export default () => {
return <IconButton icon="plus">Click</IconButton>;
};

tsx

API Reference

PROPERTY
TYPE
DEFAULT
kind
enum
primary
dimension
enum
regular
icon
enum
disabled
boolean
busy
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