Playground

Playground for Reactive Button.

Interactive Playground

Toggle or change the props to see changes.

buttonState

idleloadingsuccesserror

idleText

successText

shadow

outline

animation

className

size

tinysmallnormallarge

messageDuration

color

primarySecondarydarklightgreenredyellowtealvioletblue

loadingText

errorText

rounded

block

disabled

width

px

height

px

Editor Playground

Edit code to see changes.

function App() { const [state, setState] = useState('idle'); const onClickHandler = () => { setState('loading'); setTimeout(() => { setState('success'); }, 2000); }; return ( <ReactiveButton buttonState={state} onClick={onClickHandler} color={'primary'} idleText={'Click Me'} loadingText={ <> <FontAwesomeIcon icon={faCircleNotch} spin /> Loading </> } successText={ <> <FontAwesomeIcon icon={faThumbsUp} /> Success </> } errorText={ <> <FontAwesomeIcon icon={faBomb} /> Error </> } type={'button'} className={'class1 class2'} style={{ borderRadius: '5px', }} outline={false} shadow={false} rounded={false} size={'normal'} block={false} messageDuration={2000} disabled={false} buttonRef={null} width={null} height={null} animation={true} /> ); }

function App() {
  const [state, setState] = useState('idle');

  const onClickHandler = () => {
    setState('loading');
    setTimeout(() => {
      setState('success');
    }, 2000);
  };

  return (
    <ReactiveButton
      buttonState={state}
      onClick={onClickHandler}
      color={'primary'}
      idleText={'Click Me'}
      loadingText={
        <>
          <FontAwesomeIcon icon={faCircleNotch} spin /> Loading
        </>
      }
      successText={
        <>
          <FontAwesomeIcon icon={faThumbsUp} /> Success
        </>
      }
      errorText={
        <>
          <FontAwesomeIcon icon={faBomb} /> Error
        </>
      }
      type={'button'}
      className={'class1 class2'}
      style={{
        borderRadius: '5px',
      }}
      outline={false}
      shadow={false}
      rounded={false}
      size={'normal'}
      block={false}
      messageDuration={2000}
      disabled={false}
      buttonRef={null}
      width={null}
      height={null}
      animation={true}
    />
  );
}