Positions in React Floating action button component

23 May 20239 minutes to read

The floating action button can be positioned anywhere on the target using the position property. If the target is not defined, then FAB is positioned based on the browser viewport.

The position values of Floating Action Button are as follows:

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.

app.jsx
app.tsx
index.css
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={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></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={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></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

You can define the custom position of the Floating Action Button by override the top, left, right, and bottom CSS properties using cssClass. For detailed information, refer index.css file below.

app.jsx
app.tsx
index.css
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={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></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={{ position: 'relative', minHeight: '350px', border: '1px solid' }}></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;
}