HelpBot Assistant

How can I help you?

Types and styles in React Button component

2 Mar 202623 minutes to read

This section explains the different styles and types of buttons in the Syncfusion Button component.

Button styles

The Button component provides predefined styles through the cssClass property. Use these styles to convey different actions and meanings:

Class Description
e-primary Represents a primary action.
e-success Represents a positive action.
e-info Represents an informative action.
e-warning Represents an action requiring caution.
e-danger Represents a negative action.
e-link Styles the button as a hyperlink. 
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
function App() {
    return (<div>
          {/* Primary Button - Used to represent a primary action. */}
          <ButtonComponent cssClass='e-primary'>Primary</ButtonComponent>

          {/* Success Button - Used to represent a positive action. */}
          <ButtonComponent cssClass='e-success'>Success</ButtonComponent>

          {/* Info Button - Used to represent an informative action. */}
          <ButtonComponent cssClass='e-info'>Info</ButtonComponent>

          {/* Warning Button - Used to represent an action with caution.*/}
          <ButtonComponent cssClass='e-warning'>Warning</ButtonComponent>

          {/* Danger Button - Used to represent a negative action.*/}
          <ButtonComponent cssClass='e-danger'>Danger</ButtonComponent>

          {/* Link Button - Changes the appearance of the Button like a hyperlink.*/}
          <ButtonComponent cssClass='e-link'>Link</ButtonComponent>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

function App() {
    return (
      <div>
          { /* Primary Button - Used to represent a primary action. */ }
          <ButtonComponent cssClass='e-primary'>Primary</ButtonComponent>

          { /* Success Button - Used to represent a positive action. */ }
          <ButtonComponent cssClass='e-success'>Success</ButtonComponent>

          { /* Info Button - Used to represent an informative action. */ }
          <ButtonComponent cssClass='e-info'>Info</ButtonComponent>

          { /* Warning Button - Used to represent an action with caution.*/ }
          <ButtonComponent cssClass='e-warning'>Warning</ButtonComponent>

          { /* Danger Button - Used to represent a negative action.*/ }
          <ButtonComponent cssClass='e-danger'>Danger</ButtonComponent>

          { /* Link Button - Changes the appearance of the Button like a hyperlink.*/ }
          <ButtonComponent cssClass='e-link'>Link</ButtonComponent>
      </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

Predefined button styles provide visual indication only. Ensure button content clearly describes its purpose for users of assistive technologies such as screen readers.

Button types

The Button component provides the following types:

  • Basic types
  • Flat Button
  • Outline Button
  • Round Button
  • Toggle Button

Basic types

The basic Button types are explained below.

Type Description
Button Defines a click Button.
Submit This Button submits the form data to the server.
Reset This Button resets all the controls of the form elements to their initial values. 
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
function App() {
    return (<form>
          {/* Submit.*/}
          <ButtonComponent type='submit'>Submit</ButtonComponent>

          {/* Reset.*/}
          <ButtonComponent type='reset'>Reset</ButtonComponent>
      </form>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

function App() {
  return (
      <form>
          { /* Submit.*/ }
          <ButtonComponent type='submit'>Submit</ButtonComponent>

          { /* Reset.*/ }
          <ButtonComponent type='reset'>Reset</ButtonComponent>
      </form>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

Flat Button

A flat button is styled with no background color. To create a flat button, set the cssClass property to e-flat.

Outline Button

An outline button has a border with a transparent background. To create an outline button, set the cssClass property to e-outline.

Round Button

A round button is shaped like a circle and typically contains an icon representing its action. To create a round button, set the cssClass property to e-round.

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);
function App() {
    return (<div>
          {/* Flat Button. */}
          <ButtonComponent cssClass='e-flat'>Flat</ButtonComponent>

          {/* Outline Button. */}
          <ButtonComponent cssClass='e-outline'>Outline</ButtonComponent>

          {/* Round Button - Icon can be loaded by setting "e-icons e-plus-icon" in "iconCss" property.
        Use "e-icons" class name to load Essential JS 2 built-in icons.
        Use "e-plus-icon" class name to load plus icon, that you can refer in "styles.css". */}
          <ButtonComponent cssClass='e-round' iconCss='e-icons e-plus-icon' isPrimary={true}/>
      </div>);
}
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);

function App() {
  return (
      <div>
          { /* Flat Button. */ }
          <ButtonComponent cssClass='e-flat'>Flat</ButtonComponent>

          { /* Outline Button. */ }
          <ButtonComponent cssClass='e-outline'>Outline</ButtonComponent>

          { /* Round Button - Icon can be loaded by setting "e-icons e-plus-icon" in "iconCss" property.
          Use "e-icons" class name to load Essential JS 2 built-in icons.
          Use "e-plus-icon" class name to load plus icon, that you can refer in "styles.css". */ }
          <ButtonComponent cssClass='e-round' iconCss='e-icons e-plus-icon' isPrimary={true}/>
      </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

Toggle Button

A toggle button changes between two states. The button is active in the toggled state and can be recognized through the e-active class. To create a toggle button, set the isToggle property to true. The following example demonstrates how the toggle button text changes between play and pause based on its state:

import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { useState } from "react";
import * as React from "react";
import * as ReactDOM from "react-dom";
enableRipple(true);
function App() {
    const [state, setState] = useState({
        content: 'Play',
        iconCss: 'e-btn-sb-icon e-play-icon'
    });
    // Click Event.
    function btnClick() {
        if (state.content === "Play") {
            setState({ content: 'Pause', iconCss: 'e-btn-sb-icon e-pause-icon' });
        }
        else {
            setState({ content: 'Play', iconCss: 'e-btn-sb-icon e-play-icon' });
        }
    }
    // Button is active in toggled state.
    return (<ButtonComponent cssClass='e-flat' iconCss={state.iconCss} content={state.content} isToggle={true} onClick={btnClick}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('button'));
import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { useState } from "react";
import * as React from "react";
import * as ReactDOM from "react-dom";

enableRipple(true);

function App() {
    const [state, setState] = useState({
      content: 'Play' ,
      iconCss: 'e-btn-sb-icon e-play-icon'
    });
    // Click Event.
    function btnClick(): void {
        if (state.content === "Play") {
            setState({ content: 'Pause', iconCss:'e-btn-sb-icon e-pause-icon'});
        }
        else {
            setState({ content: 'Play',iconCss:'e-btn-sb-icon e-play-icon' });
        }
    }
    // Button is active in toggled state.
    return (
        <ButtonComponent cssClass='e-flat' iconCss={state.iconCss} content= {state.content} isToggle={true} onClick={ btnClick }/>
    )
}
export default App;
ReactDOM.render(<App />, document.getElementById('button'));

Change Button type

To change the default button to a flat button, set the cssClass property to e-flat and define the button text using the content property.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
//To change the Button type.
function App() {
    return (<ButtonComponent cssClass='e-flat' content='Button'></ButtonComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import {ButtonComponent} from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

//To change the Button type.
function App() {
  return (
    <ButtonComponent cssClass='e-flat' content='Button'></ButtonComponent>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

Icons

Button with font icons

The Button can have an icon to provide the visual representation of the action. To place the icon on a Button, set the iconCss property with the required icon CSS. By default, the icon is positioned to the left side of the Button. You can customize the icon’s position by
using the iconPosition property.

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);
function App() {
    return (<div>
          {/* To position the icon to the left of the text on a Button. */}
          <ButtonComponent iconCss='e-btn-sb-icon e-prev-icon'>Previous</ButtonComponent>

          {/* To position the icon to the right of the text on a Button. */}
          <ButtonComponent iconCss='e-btn-sb-icon e-stop-icon' iconPosition='Right'>Stop</ButtonComponent>
      </div>);
}
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);

function App() {
  return (
      <div>
          { /* To position the icon to the left of the text on a Button. */ }
          <ButtonComponent iconCss='e-btn-sb-icon e-prev-icon'>Previous</ButtonComponent>

          { /* To position the icon to the right of the text on a Button. */ }
          <ButtonComponent iconCss='e-btn-sb-icon e-stop-icon' iconPosition='Right'>Stop</ButtonComponent>
      </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

Button with SVG image

SVG image can be added to the Button using iconCss property.

In the following example, SVG image is added using the iconCss class e-search-icon by setting height and width.

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);
function App() {
    return (<div>
          <ButtonComponent iconCss='e-search-icon'/>
      </div>);
}
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);

function App() {
  return (
      <div>
          <ButtonComponent iconCss='e-search-icon'/>
      </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

The Essential® JS 2 provides a set of icons that can be loaded by applying e-icons class name to the element. You can also use third party icons on the Button using the iconCss property.

Button size

The two types of Button sizes are default and small. To change the size of the default Button to small Button, set the cssClass property to e-small.

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);
function App() {
    return (<div>
          {/* Small Button. */}
          <ButtonComponent cssClass='e-small'>Small</ButtonComponent>

          {/* Normal Button. */}
          <ButtonComponent>Normal</ButtonComponent>
      </div>);
}
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);

function App() {
  return (
      <div>
          { /* Small Button. */ }
          <ButtonComponent cssClass='e-small'>Small</ButtonComponent>

          { /* Normal Button. */ }
          <ButtonComponent>Normal</ButtonComponent>
      </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));

See Also