Customize button appearance in React Button component
7 Aug 20231 minute to read
You can customize the appearance of the Button by using the Cascading Style Sheets (CSS). Define the CSS according to your requirement, and assign the class name to the cssClass
property.In the following code snippet the background color, text color, height, width, and sharp corner of the Button can be customized through the e-custom
class for all states (hover, focus, and active).
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'));
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'));