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
stringDefault'default'Each state has:
- A label (required)
- An icon
- an option to be disabled
Control the state with the
stateprop. 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' /> - labels
Object.<Requirednode>Required. Each state has a
label. - icons
Object.<node>Default{ default: undefined, pending: <Icon src={SpinnerSimple} className={classNames('icon-spin')} />, complete: <Icon src={CheckCircleOutline} />, error: <Icon src={Cancel} />, }Required. Each state has an
icon. - disabledStates
string[]Default['pending', 'complete']Required. Each state has a
disabledState - onClick
funcSpecifies the callback function when the button is clicked