Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

StatefulButton

The stateful button is a button used to display an actionable icon.

Basic usage

Custom icons and disabled states

Custom states with Paragon icons

StatefulButton Props API
  • className
    string
  • state
    string

    Each state has:

    • A label (required)
    • An icon
    • an option to be disabled

    Control the state with the state prop. Example usage:

    <StatefulButton
  state="pending"
  labels={{
    default: 'Download',
    pending: 'Downloading',
    complete: 'Downloaded',
  }}
  icons={{
    default: <Icon className="fa fa-download" />,
    pending: <Icon className="fa fa-spinner fa-spin" />,
    complete: <Icon className="fa fa-check" />,
  }}
  disabledStates=['pending']
  className='btn-primary mr-2'
/>
    Default'default'
  • labels
    Object.<node> Required

    Required. Each state has a label.

  • icons
    Object.<node>

    Required. Each state has an icon.

    Default{ default: undefined, pending: <Icon src={SpinnerSimple} className={classNames('icon-spin')} />, complete: <Icon src={CheckCircleOutline} />, error: <Icon src={Cancel} />, }
  • disabledStates
    string[]

    Required. Each state has a disabledState

    Default['pending', 'complete']
  • onClick
    func

    Specifies the callback function when the button is clicked

Contents

Guides

Foundations

Components

Buttonlike
Choreography
Content
Forms
Forms (deprecated)
Hooks
Imagery & Iconography
Layout
Navigation
Overlays
Status & metadata
Table

All components (A-Z)