Styles in React Floating action button component

2 Mar 202611 minutes to read

This section explains the different styles of Floating Action Button.

FAB styles

Apply predefined styles to the 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.

app.jsx

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'));

app.tsx

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'));

index.css

/* 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 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 Floating Action Button component
.e-fab.e-btn	Base FAB button styling
.e-fab.e-btn:hover	FAB styling on mouse hover
.e-fab.e-btn:focus	FAB styling when focused via keyboard
.e-fab.e-btn:active	FAB styling when pressed or active
.e-fab.e-btn-icon	Icon styling within the FAB
.e-fab.e-btn-content	Text/content styling within the FAB
.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 FAB state
.e-fab-overlay	Overlay styling when FAB has focus

Show text on hover

By using cssClass, you can customize the 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.

app.jsx

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'));

app.tsx

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'));

index.css

/* 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 Floating Action Button. Refer the index.css file below.

app.jsx

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'));

app.tsx

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'));

index.css

/* 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;
}