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

Links

Open in playground Open in Storybook View source ARIA design ARIA authoring

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

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