Theme

npm_versionnpm Paragon package page

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

Basic usage

Any Paragon component or export may be added to the code example.

Custom icons and disabled states

Any Paragon component or export may be added to the code example.

Custom states with Paragon icons

Any Paragon component or export may be added to the code example.

Props API#

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

Usage Insights#

StatefulButton

Project NameParagon VersionInstance Count
frontend-app-account22.0.08
frontend-app-admin-portal21.13.121
frontend-app-authn22.6.07
frontend-app-communications22.0.01
frontend-app-course-authoring22.4.016
proctoring22.4.01
xpert_unit_summary22.4.02
frontend-app-discussions22.1.12
frontend-app-ecommerce20.46.31
frontend-app-gradebook22.1.11
frontend-app-learner-dashboard22.4.01
frontend-app-learner-portal-enterprise21.13.18
frontend-app-learner-portal-programs20.46.31
frontend-app-learner-record22.6.01
frontend-app-learning22.3.01
frontend-app-library-authoring21.11.34
frontend-app-ora-grading21.11.32
frontend-app-payment22.1.13
frontend-app-profile22.3.11
frontend-app-publisher20.46.31
frontend-app-support-tools20.46.02
frontend-learner-portal-base12.2.02
frontend-lib-content-components22.0.01
frontend-lib-special-exams22.2.01