Items in React Speed Dial

4 Sep 202614 minutes to read

Define the action items displayed in the React Speed Dial popup using the items property. Each item is a SpeedDialItemModel object that can include text, icons, disabled states, and custom IDs. Configure item appearance and behavior to create a functional and user-friendly action menu.

Fields	Type	Description
text	string	Defines the text content of SpeedDialItem.
iconCss	string	Defines one or more CSS classes to include an icon or image in React Speed Dial item.
disabled	boolean	Defines whether to enable or disable the SpeedDialItem.
id	string	Defines a unique value for the SpeedDialItem which can be used to identify the item in event args.
title	string	Defines the title of SpeedDialItem to display tooltip.

Icons in React Speed Dial items

You can customize the icon and text of React Speed Dial action items using iconCss and text properties.

Icon only

Display only an icon in React Speed Dial items by setting the iconCss property. Add the title property to show a tooltip on hover, providing users with item descriptions when text is not displayed.

app.jsx

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', title: 'Cut' },
    { iconCss: 'e-icons e-copy', title: 'Copy' },
    { iconCss: 'e-icons e-paste', title: 'Paste' }
  ];
  return (<div>
    <div id="targetElement" style=></div>
    <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
createRoot(document.getElementById('button')).render(<App />);

app.tsx

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', title: 'Cut' },
    { iconCss: 'e-icons e-copy', title: 'Copy' },
    { iconCss: 'e-icons e-paste', title: 'Paste' }
  ];

  return (
    <div>
      <div id="targetElement" style=></div>
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
createRoot(document.getElementById('button')!).render(<App />);

Text only

Display only text in React Speed Dial items by setting the text property without specifying icon properties. This creates a text-based menu suitable for action lists or labels.

app.jsx

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 = [
    { text: 'Cut', title: 'Cut' },
    { text: 'Copy', title: 'Copy' },
    { text: 'Paste', title: 'Paste' }
  ];
  return (<div>
    <div id="targetElement" style=></div>
    <SpeedDialComponent id='speeddial' content='Edit' items={items} target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
createRoot(document.getElementById('button')).render(<App />);

app.tsx

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[] = [
    { text: 'Cut', title: 'Cut' },
    { text: 'Copy', title: 'Copy' },
    { text: 'Paste', title: 'Paste' }
  ];

  return (
    <div>
      <div id="targetElement" style=></div>
      <SpeedDialComponent id='speeddial' content='Edit' items={items} target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
createRoot(document.getElementById('button')!).render(<App />);

Icon with text

Display both icon and text in React Speed Dial items by setting both the iconCss and text properties. This combination provides clear visual and textual identification for each action.

app.jsx

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 = [
    { text: 'Cut', iconCss: 'e-icons e-cut', title: 'Cut' },
    { text: 'Copy', iconCss: 'e-icons e-copy', title: 'Copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste', title: 'Paste' }
  ];
  return (<div>
    <div id="targetElement" style=></div>
    <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' content='Edit' items={items} target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
createRoot(document.getElementById('button')).render(<App />);

app.tsx

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[] = [
    { text: 'Cut', iconCss: 'e-icons e-cut', title: 'Cut' },
    { text: 'Copy', iconCss: 'e-icons e-copy', title: 'Copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste', title: 'Paste' }
  ];

  return (
    <div>
      <div id="targetElement" style=></div>
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' content='Edit' items={items} target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
createRoot(document.getElementById('button')!).render(<App />);

Disabled

Disable React Speed Dial items by setting the disabled property to true. Disabled items appear grayed out and cannot be clicked by users.

app.jsx

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 = [
    { text: 'Cut', disabled: true, title: 'Cut' },
    { text: 'Copy', title: 'Copy' },
    { text: 'Paste', title: 'Paste' }
  ];
  return (<div>
    <div id="targetElement" style=></div>
    <SpeedDialComponent id='speeddial' content='Edit' items={items} target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
createRoot(document.getElementById('button')).render(<App />);

app.tsx

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[] = [
    { text: 'Cut', disabled: true, title: 'Cut' },
    { text: 'Copy', title: 'Copy' },
    { text: 'Paste', title: 'Paste' }
  ];

  return (
    <div>
      <div id="targetElement" style=></div>
      <SpeedDialComponent id='speeddial' content='Edit' items={items} target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
createRoot(document.getElementById('button')!).render(<App />);

Animation

Animate the appearance of React Speed Dial action items when the popup opens or closes. Customize animation behavior using the animation property to control the effect, delay, and duration. By default, items animate with a fade effect. Choose from various speeddialanimation effects to match your design.

Below example demonstrates the React Speed Dial items with applied Zoom effect.

app.jsx

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 = [
    { text: 'Cut', iconCss: 'e-icons e-cut', title: 'Cut' },
    { text: 'Copy', iconCss: 'e-icons e-copy', title: 'Copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste', title: 'Paste' }
  ];
  const animation = { effect: 'Zoom' };
  return (<div>
    <div id="targetElement" style=></div>
    <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' content='Edit' items={items} animation={animation} target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
createRoot(document.getElementById('button')).render(<App />);

app.tsx

import { SpeedDialComponent, type SpeedDialItemModel, type SpeedDialAnimationSettingsModel } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import '../index.css';

function App() {
  const items: SpeedDialItemModel[] = [
    { text: 'Cut', iconCss: 'e-icons e-cut', title: 'Cut' },
    { text: 'Copy', iconCss: 'e-icons e-copy', title: 'Copy' },
    { text: 'Paste', iconCss: 'e-icons e-paste', title: 'Paste' }
  ];
  const animation: SpeedDialAnimationSettingsModel =
    { effect: 'Zoom' };

  return (
    <div>
      <div id="targetElement" style=></div>
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' content='Edit' items={items} animation={animation} target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
createRoot(document.getElementById('button')!).render(<App />);

Template

Use templates to completely customize the appearance and content of React Speed Dial action items and the popup container. The itemTemplate property customizes individual items, while popupTemplate customizes the entire popup container. For comprehensive template examples and advanced customization options, see the Template documentation.