HelpBot Assistant

How can I help you?

Positions in React Floating action button component

2 Mar 20269 minutes to read

Position the Floating Action Button anywhere on the page using the position property. When paired with the target property, the FAB positions itself relative to the specified container. Without a target, the FAB positions itself relative to the browser viewport.

Use predefined positions to quickly deploy the FAB to common locations (corners and center points). The available position values are:

  • TopLeft
  • TopCenter
  • TopRight
  • MiddleLeft
  • MiddleCenter
  • MiddleRight
  • BottomLeft
  • BottomCenter
  • BottomRight
import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
    return (
            {/* To render Floating Action Button in BottomLeft Position. */}
            <FabComponent id='fab' content='Add' position='BottomLeft'></FabComponent>
    );
}
export default App;

Below example demonstrates different supported positions of FAB.

import { FabComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    return (<div>
        <div id="target" style=></div>
        <FabComponent id="fab1" iconCss='fab-icons fab-icon-people' position='TopLeft' target='#target'></FabComponent>
        <FabComponent id="fab2" iconCss='fab-icons fab-icon-people' position='TopCenter' target='#target'></FabComponent>
        <FabComponent id="fab3" iconCss='fab-icons fab-icon-people' position='TopRight' target='#target'></FabComponent>
        <FabComponent id="fab4" iconCss='fab-icons fab-icon-people' position='MiddleLeft' target='#target'></FabComponent>
        <FabComponent id="fab5" iconCss='fab-icons fab-icon-people' position='MiddleCenter' target='#target'></FabComponent>
        <FabComponent id="fab6" iconCss='fab-icons fab-icon-people' position='MiddleRight' target='#target'></FabComponent>
        <FabComponent id="fab7" iconCss='fab-icons fab-icon-people' position='BottomLeft' target='#target'></FabComponent>
        <FabComponent id="fab8" iconCss='fab-icons fab-icon-people' position='BottomCenter' target='#target'></FabComponent>
        <FabComponent id="fab9" iconCss='fab-icons fab-icon-people' position='BottomRight' target='#target'></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="target" style=></div>
            <FabComponent id="fab1" iconCss='fab-icons fab-icon-people' position='TopLeft' target='#target'></FabComponent>
            <FabComponent id="fab2" iconCss='fab-icons fab-icon-people' position='TopCenter' target='#target'></FabComponent>
            <FabComponent id="fab3" iconCss='fab-icons fab-icon-people' position='TopRight' target='#target'></FabComponent>
            <FabComponent id="fab4" iconCss='fab-icons fab-icon-people' position='MiddleLeft' target='#target'></FabComponent>
            <FabComponent id="fab5" iconCss='fab-icons fab-icon-people' position='MiddleCenter' target='#target'></FabComponent>
            <FabComponent id="fab6" iconCss='fab-icons fab-icon-people' position='MiddleRight' target='#target'></FabComponent>
            <FabComponent id="fab7" iconCss='fab-icons fab-icon-people' position='BottomLeft' target='#target'></FabComponent>
            <FabComponent id="fab8" iconCss='fab-icons fab-icon-people' position='BottomCenter' target='#target'></FabComponent>
            <FabComponent id="fab9" iconCss='fab-icons fab-icon-people' position='BottomRight' target='#target'></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%;
}

/* Represents the styles for fab icon */
@font-face {
  font-family: 'fab-icons';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
  font-weight: normal;
  font-style: normal;
  }

  [class^="fab-icon-"],
  [class*=" fab-icon-"] {
      font-family: 'fab-icons' !important;
      speak: none;
      font-size: 55px;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }

  .fab-icon-people:before {
      content: "\e70a";
  }

Custom position

Define a custom position for the Floating Action Button by overriding the top, left, right, and bottom CSS properties using the cssClass property. This approach allows precise control over FAB placement for specialized layouts. Refer to the index.css file in the example below for implementation details.

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' cssClass='custom-position' 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' cssClass='custom-position' 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%;
}

/* Represents the styles for button positioning */
.e-fab.e-btn.custom-position {
  left: 40px;
  top: 40px;
  bottom: unset;
  right: unset;
}