Display modes in React Speed dial component

2 Mar 20263 minutes to read

Choose between two layout modes to display SpeedDial action items using the mode property: Linear (list-based) and Radial (circular). Select the mode based on your UI design needs and available screen space.

Linear display mode

In Linear mode, SpeedDial action items are displayed in a straight line format—either horizontally or vertically. This layout is ideal for straightforward action lists. By default, SpeedDial items display in Linear mode.

Direction

Control the direction in which action items extend from the SpeedDial button by setting the direction property. The direction determines whether items flow left, right, up, or down from the button. By default, the direction is set to Auto, where the layout automatically adjusts based on the SpeedDial’s position on the screen to avoid viewport edges.

The available Linear directions are:

• Left - Action items extend leftward from the SpeedDial button
• Right - Action items extend rightward from the SpeedDial button
• Up - Action items extend upward from the SpeedDial button
• Down - Action items extend downward from the SpeedDial button
• Auto - Direction auto-calculates based on the SpeedDial’s position to keep items visible. For example, if SpeedDial is at bottom-right, items display at top.

app.jsx

import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
  const items = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
  ];
  return (<div>
    <div id="targetElement" style=></div>
    <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} mode='Linear' direction='Left' target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { SpeedDialComponent, SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

function App() {
  const items: SpeedDialItemModel[] = [
    { iconCss: 'e-icons e-cut' },
    { iconCss: 'e-icons e-copy' },
    { iconCss: 'e-icons e-paste' }
  ];
  return (
    <div>
      <div id="targetElement" style=></div>
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} mode='Linear' direction='Left' target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

Radial display mode (Radial Menu)

Display action items in a circular pattern around the SpeedDial button using Radial mode. This creates a radial menu layout ideal for presenting multiple options in an organized, visually distinctive way. For comprehensive radial mode customization options including direction, angles, and offset, see the Radial Menu documentation.