Display modes in React Speed Dial

4 Sep 20263 minutes to read

Choose between two layout modes to display React Speed Dial 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, React Speed Dial action items are displayed in a straight line format—either horizontally or vertically. This layout is ideal for straightforward action lists. By default, React Speed Dial items display in Linear mode.

Direction

Control the direction in which action items extend from the React Speed Dial 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 React Speed Dial’s position on the screen to avoid viewport edges.

The available Linear directions are:

  • Left - Action items extend leftward from the React Speed Dial button
  • Right - Action items extend rightward from the React Speed Dial button
  • Up - Action items extend upward from the React Speed Dial button
  • Down - Action items extend downward from the React Speed Dial button
  • Auto - Direction auto-calculates based on the React Speed Dial’s position to keep items visible. For example, if React Speed Dial is at bottom-right, items display at top.
import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import '../index.css';

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;
createRoot(document.getElementById('button')).render(<App />);
import { SpeedDialComponent, type SpeedDialItemModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import '../index.css';

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;
createRoot(document.getElementById('button')!).render(<App />);

Radial display mode (Radial Menu)

Display action items in a circular pattern around the React Speed Dial 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.