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:

        default: 'Download',
        pending: 'Downloading',
        complete: 'Downloaded',
        default: <Icon className="fa fa-download" />,
        pending: <Icon className="fa fa-spinner fa-spin" />,
        complete: <Icon className="fa fa-check" />,
      className='btn-primary mr-2'
  • 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