Skip to main content
‌
‌

Button

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

Quick nav

Features

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

Links

View source Report an issue 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.

The ButtonsGroup component overrides the buttons style and dimension. The style is always set to secondary while dimension is defined by the property applied on the group itself

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

tab

Move focus on the element or outside

enter

Trigger the component action