v14.0.8


actions

Button

A button is a box area or text that communicates and triggers user actions when clicked.

Features

  • Keyboard accessible
  • Customizable icon
  • Multiple styles and sizes
  • Themes ready

Anatomy

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

tsx

Grouping buttons

Sometimes you need to group buttons together to create a single visual context or to create a set of related actions. To group buttons, you can use the ButtonsGroup component.

API Reference

Button

PROPERTY
TYPE
DEFAULT
kind
enum
primary
dimension
enum
regular
fullWidth
boolean
false
icon
enum
iconPosition
enum
left
iconColor
string
disabled
boolean
busy
boolean
pressed
boolean
false
onClick
function
as
enum
button

ButtonsGroup

PROPERTY
TYPE
DEFAULT
kind
enum
primary
dimension
enum
regular

Accessibility

Adheres to the button role requirements.

Keyboard interactions

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

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024