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}
/>

Sizes

ButtonAction supports the same sizes as Button. The built-in loading feedback icon automatically adjusts to match the button size — no manual configuration needed.

<ButtonAction
  label="Small"
  size="small"
  onClick={() => new Promise((resolve) => setTimeout(() => resolve(true), 1500))}
/>
<ButtonAction
  label="Medium"
  onClick={() => new Promise((resolve) => setTimeout(() => resolve(true), 1500))}
/>
<ButtonAction
  label="Large"
  size="large"
  onClick={() => new Promise((resolve) => setTimeout(() => resolve(true), 1500))}
/>

📐 Click the buttons to see the loading indicator sized correctly for each button size.

Forwarding HTML Attributes

In addition to the options below in the component's API section, you can specify React synthetic events or any HTML attribute you like. All attributes that don't interfere with the API are forwarded to the native HTML <button>. This enables making the component interactive and helps to improve its accessibility.

👉 Refer to the MDN reference for the full list of supported attributes of the button element.

API