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