StatefulButton
The stateful button is a button used to display an actionable icon.
Basic usage
Show editable code example
Any Paragon component or export may be added to the code example.
Custom icons and disabled states
Show editable code example
Any Paragon component or export may be added to the code example.
Custom states with Paragon icons
Show editable code example
Any Paragon component or export may be added to the code example.
Props API#
StatefulButton Props API
- className
string
- state
string
Default'default'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' />
- 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
func
Specifies the callback function when the button is clicked
Usage Insights#
StatefulButton
Project Name | Paragon Version | Instance Count | |
---|---|---|---|
frontend-app-account | 22.10.0 | 8 | |
frontend-app-admin-portal | 21.13.1 | 26 | |
frontend-app-authn | 22.10.0 | 7 | |
frontend-app-communications | 22.7.0 | 1 | |
frontend-app-course-authoring | 22.8.1 | 17 | |
ora_settings | 22.8.1 | 1 | |
proctoring | 22.8.1 | 1 | |
xpert_unit_summary | 22.8.1 | 2 | |
frontend-app-discussions | 22.7.0 | 2 | |
frontend-app-ecommerce | 20.46.3 | 1 | |
frontend-app-gradebook | 22.8.1 | 1 | |
frontend-app-learner-dashboard | 22.9.0 | 1 | |
frontend-app-learner-portal-enterprise | 21.13.1 | 10 | |
frontend-app-learner-portal-programs | 21.13.1 | 1 | |
frontend-app-learner-record | 22.10.0 | 1 | |
frontend-app-learning | 22.10.0 | 1 | |
frontend-app-library-authoring | 21.11.3 | 4 | |
frontend-app-ora-grading | 21.11.3 | 2 | |
frontend-app-payment | 22.9.0 | 3 | |
frontend-app-profile | 22.10.0 | 1 | |
frontend-app-publisher | 21.13.1 | 1 | |
frontend-app-support-tools | 21.13.1 | 2 | |
frontend-learner-portal-base | 12.2.0 | 2 | |
frontend-lib-special-exams | 22.7.0 | 1 |