Styles in EJ2 TypeScript Floating action button control

25 Jul 202412 minutes to read

This section explains the different styles of Floating Action Button.

FAB styles

The JavaScript Floating Action Button supports the following predefined styles that can be defined using the cssClass property. You can customize by replacing the cssClass property with the below defined class.

cssClass Description
e-primary Used to represent a primary action.
e-outline Used to represent an appearance of button with outline.
e-info Used to represent an informative action.
e-success Used to represent a positive action.
e-warning Used to represent an action with caution.
e-danger Used to represent a negative action. 
import { Fab } from "@syncfusion/ej2-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

    // Initialize the Floating Action Button control with applied warning style
    let warningbtn: Fab = new Fab({
        iconCss: 'e-icons e-edit',
        cssClass: 'e-warning',
        target: '#targetElement',
    })
    // Render initialized Floating Action Button
    warningbtn.appendTo('#fab')
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Floating Action Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <button id='fab'></button>
    </div>
</body>

</html>
#container {
  visibility: hidden;
}

#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 */

Predefined Floating Action Button styles provide only the visual indication. So, Floating Action Button content property should define the Floating Action Button style for the users of assistive technologies such as screen readers.

Styles customization

To modify the Floating Action Button appearance, you need to override the default CSS of Floating Action Button control. Please find the list of CSS classes and its corresponding section in Floating Action Button control. Also, you have an option to create your own custom theme for the controls using our Theme Studio.

CSS Class Purpose of Class
.e-fab.e-btn To customize the FAB.
.e-fab.e-btn:hover To customize the FAB on hover.
.e-fab.e-btn:focus To customize the FAB on focus.
.e-fab.e-btn:active To customize the FAB on active.
.e-fab.e-btn-icon To customize the style of FAB icon.

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 styles.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 { Fab } from "@syncfusion/ej2-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize the Floating Action Button control
let fab: Fab = new Fab({
    iconCss: 'e-icons e-edit',
    content:'<span class="text-container"><span class="textEle">Edit</span></span>',
    cssClass: 'fab-hover',
    target: '#targetElement',
})
// Render initialized Floating Action Button
fab.appendTo('#fab')
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Floating Action Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <button id='fab'></button>
    </div>
</body>

</html>
#container {
  visibility: hidden;
}

#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 styles.css file below.

import { Fab } from "@syncfusion/ej2-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// Initialize the Floating Action Button control
let fab: Fab = new Fab({
    iconCss: 'e-icons e-people',
    content:'Contact',
    cssClass: 'custom-css',
    target: '#targetElement',
})
// Render initialized Floating Action Button
fab.appendTo('#fab')
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Floating Action Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="targetElement" style="position:relative;min-height:350px;border:1px solid;"></div>
        <button id='fab'></button>
    </div>
</body>
<style>
    #container {
        visibility: hidden;
    }

    #loader {
        color: #008cff;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>
</html>
.custom-css.e-fab.e-btn {
  border-color: darkgrey;
  border-width: 4px;
}