ButtonAction

⚠️ This documentation file needs to be reviewed ⚠️, but the component is ready to use.

ButtonAction allows users to perform actions and reflects state changes based on the result of the invoked action. It is an extension of the Button component, meaning it supports all properties defined by the Button component.

Basic Usage

To implement the ButtonAction component, you need to import it first:

import { ButtonAction } from 'rades_react';

And use it:

<ButtonAction
  label="My button action"
  onClick={() => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true)
      }, 1000)
    })
  }}
/>

Or:

<ButtonAction
  label="My button action"
  onClick={() => true}
/>

See API for all available options.

General Guidelines

• Use short yet comprehensible labels to make buttons fit small screens.

• Since buttons are there to take actions, use a verb to make it obvious what your buttons do.

• Don't overwhelm your UI with too many high-emphasis actions. There should always be one but chances are that having more of them is not necessary.

• Do not forget, that onClick must return Promise or boolean

Default, unconfigured button comes in medium size and primary color variant.

State

ButtonAction updates its visual appearance based on the result of the click action. The state is determined by the value returned from the onClick handler, which must return either a boolean or a Promise.

<ButtonAction
  label="Success state"
  onClick={() => true}
/>
<ButtonAction
  label="Error state"
  onClick={() => false}
/>

API