How to style React Progress Button in React Progress Button

Update the React Progress Button’s text content and visual appearance while progress is active by modifying the button’s content and cssClass property within the begin and end event handlers. This technique allows you to provide real-time visual feedback and status updates to users during long-running operations.

app.jsx

import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useState } from "react";
function App() {
    const [state, setState] = useState({
        content: 'Upload',
        cssClass: 'e-hide-spinner'
    });
    function begin() {
        setState({ content: 'Uploading...', cssClass: 'e-hide-spinner e-info' });
    }
    function end() {
        setState({ content: 'Success', cssClass: 'e-hide-spinner e-success' });
        setTimeout(() => {
            setState({ content: 'Upload', cssClass: 'e-hide-spinner' });
        }, 500);
    }
    return (<ProgressButtonComponent content={state.content} enableProgress cssClass={state.cssClass} duration={4000} begin={begin} end={end}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));

app.tsx

import { ProgressButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useState } from "react";

function App() {
  const [state, setState] = useState({
     content: 'Upload',
     cssClass: 'e-hide-spinner'
  });
  function begin(): void {
      setState({ content: 'Uploading...', cssClass: 'e-hide-spinner e-info' });
  }

  function end(): void {
      setState({ content: 'Success', cssClass: 'e-hide-spinner e-success' });
      setTimeout(() => {
          setState({ content: 'Upload', cssClass: 'e-hide-spinner' });
      }, 500)
  }

  return (
    <ProgressButtonComponent content={state.content} enableProgress cssClass={state.cssClass} duration={4000} begin={begin} end={end}/>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('progress-button'));