Styles in React Floating Action Button

4 Sep 202611 minutes to read

This section explains the different styles of React Floating Action Button.

FAB styles

Apply predefined styles to the React Floating Action Button using the cssClass property. These semantic styles provide visual indicators for different action types and priorities.

cssClass Description Use Case
e-primary Primary action styling (default). Use for main user actions.
e-outline Button with outline appearance. Use for secondary actions.
e-info Informative action styling. Use for help or information actions.
e-success Positive action styling. Use for confirm or success actions.
e-warning Cautionary action styling. Use for warning or alert actions.
e-danger Negative action styling. Use for delete or destructive actions. 
import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
    return (<div>
        <div id="targetElement" style=> </div>
        {/* To render Floating Action Button with applied warning style */}
        <FabComponent id='fab' iconCss='e-icons e-edit' cssClass='e-warning' target='#targetElement'></FabComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
    return (
        <div>
            <div id="targetElement" style=> </div>
            {/* To render Floating Action Button with applied warning style */}
            <FabComponent id='fab' iconCss='e-icons e-edit' cssClass='e-warning' target='#targetElement'></FabComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

Predefined styles are visual indicators only. Use the content property to define semantic meaning for assistive technologies like screen readers, ensuring accessibility for all users.

Styles customization

Customize the React Floating Action Button appearance by overriding default CSS classes. Create your own theme using our Theme Studio or apply targeted CSS overrides.

CSS Class Purpose of Class
.e-fab Container for the React Floating Action Button component
.e-fab.e-btn Base React Floating Action Button button styling
.e-fab.e-btn:hover React Floating Action Button styling on mouse hover
.e-fab.e-btn:focus React Floating Action Button styling when focused via keyboard
.e-fab.e-btn:active React Floating Action Button styling when pressed or active
.e-fab.e-btn-icon Icon styling within the React Floating Action Button
.e-fab.e-btn-content Text/content styling within the React Floating Action Button
.e-fab.e-primary Primary style variant
.e-fab.e-outline Outline style variant
.e-fab.e-info Info style variant
.e-fab.e-success Success style variant
.e-fab.e-warning Warning style variant
.e-fab.e-danger Danger style variant
.e-fab:disabled Styling for disabled React Floating Action Button state
.e-fab-overlay Overlay styling when React Floating Action Button has focus

Show text on hover

By using cssClass, you can customize the React Floating Action Button to show text on hover with applied transition effect. For detailed information, refer index.css file below.

The content will behave the same , when the enableHtmlSanitizer is enabled. Since we are adding only the valid tags in content, sanitizing the content will not affect it.

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    return (<div>
        <div id="targetElement" style=></div>
        {/* To render Floating Action Button */}
        <FabComponent id='fab' iconCss='e-icons e-edit' content='<span class="text-container"><span class="textEle">Edit</span></span>' cssClass='fab-hover' target='#targetElement'></FabComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
    return (
        <div>
            <div id="targetElement" style=></div>
            {/* To render Floating Action Button */}
            <FabComponent id='fab' iconCss='e-icons e-edit' content='<span class="text-container"><span class="textEle">Edit</span></span>' cssClass='fab-hover' target='#targetElement'></FabComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* start of onhover customization */
.e-fab.e-btn.fab-hover {
  padding: 6px 0px 10px 10px;
}

.fab-hover .text-container {
  overflow: hidden;
  width: 0;
  margin: 0;
  transition: width .5s linear 0s, margin .2s linear .5s;
}

.fab-hover:hover .text-container {
  width: 35px;
  margin: 0 5px;
  transition: width .5s linear .2s, margin .2s linear 0s;
}

/* end of onhover customization */

Outline customization

By using the cssClass property, you can customize the outline color of the React Floating Action Button. Refer the index.css file below.

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

function App() {
    return (<div>
        <div id="targetElement" style=></div>
        {/* To render Floating Action Button */}
        <FabComponent id='fab' iconCss='e-icons e-people' content='Contact' cssClass='custom-css' target='#targetElement'></FabComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
    return (
        <div>
            <div id="targetElement" style=></div>
            {/* To render Floating Action Button */}
            <FabComponent id='fab' iconCss='e-icons e-people' content='Contact' cssClass='custom-css' target='#targetElement'></FabComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

/* Outline customization of fab */

.custom-css.e-fab.e-btn {
  border-color: darkgrey;
  border-width: 4px;
}