Customize button appearance in React Button component

2 Mar 20261 minute to read

Customize the Button appearance using Cascading Style Sheets (CSS). Define custom CSS styles according to your requirements and assign the class name to the cssClass property. The following example demonstrates how to customize the background color, text color, height, width, and corner styling through the e-custom class for all Button states including hover, focus, and active.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To customize Button appearance.
// Refer the "e-custom" class details in "styles.css".
function App() {
    return (<ButtonComponent cssClass='e-custom'>Custom</ButtonComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To customize Button appearance.
// Refer the "e-custom" class details in "styles.css".
function App() {
    return (
      <ButtonComponent cssClass='e-custom'>Custom</ButtonComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));