Positions in React Floating Action Button

4 Sep 20269 minutes to read

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

Use predefined positions to quickly deploy the React Floating Action Button 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 React Floating Action 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'));
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 React Floating Action Button by overriding the top, left, right, and bottom CSS properties using the cssClass property. This approach allows precise control over React Floating Action Button 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;
}