Styles in React Speed dial component

2 Mar 202618 minutes to read

Customize the SpeedDial component’s appearance using various styling options and CSS classes. This section covers button customization, predefined styles, and advanced visual effects.

SpeedDial button

Customize the SpeedDial button’s appearance using the openIconCss, closeIconCss, and content properties. These properties control what the button displays when the menu is closed and when it’s open.

Icon only

Display only icons in the SpeedDial button using the openIconCss and closeIconCss properties. These show different icons depending on whether the popup is open or closed. Add a title attribute to display a tooltip on hover, providing users with context about the button’s purpose.

app.jsx
app.tsx
import { SpeedDialComponent } 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>
    {/* Initialize the SpeedDial component with only icon */}
    <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { SpeedDialComponent } 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>
      {/* Initialize the SpeedDial component with only icon */}
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

Text only

Display only text in the SpeedDial button by setting the content property without specifying icon properties. This creates a text-based button suitable for clear, label-based interactions.

app.jsx
app.tsx
import { SpeedDialComponent } 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>
    {/* Initialize the SpeedDial component with only text */}
    <SpeedDialComponent id='speeddial' content='Edit' target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { SpeedDialComponent } 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>
      {/* Initialize the SpeedDial component with only text */}
      <SpeedDialComponent id='speeddial' content='Edit' target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

Icon with text

Display both icon and text in the SpeedDial button by using the openIconCss, closeIconCss, and content properties together. This combination provides clear visual and textual identification.

app.jsx
app.tsx
import { SpeedDialComponent } 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>
    {/* Initialize the SpeedDial component with icon and text */}
    <SpeedDialComponent id='speeddial' content='Edit' openIconCss='e-icons e-edit' target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { SpeedDialComponent } 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>
      {/* Initialize the SpeedDial component with icon and text */}
      <SpeedDialComponent id='speeddial' content='Edit' openIconCss='e-icons e-edit' target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

Disabled

Prevent user interaction with the SpeedDial component by setting the disabled property to true. When disabled, the button appears grayed out and cannot be clicked.

{/* Import the Speed Dial. */}
import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

{/* To render Speed Dial.*/}
function App() {

  return (
      {/* Initialize the SpeedDial component in disabled state */}
      <SpeedDialComponent id='speeddial' content='Edit' disabled={true} target="#targetElement"></SpeedDialComponent>
  );
}
export default App;

cssClass

Apply predefined semantic styles to the SpeedDial button using the cssClass property. These styles provide visual indicators for different action types and priorities.

cssClass	Description	Use Case
e-primary	Primary action styling (default appearance).	Use for main user actions.
e-outline	Button with outline appearance instead of solid fill.	Use for secondary actions.
e-info	Informative action styling.	Use for help or information actions.
e-success	Positive action styling indicating completion.	Use for confirm or success actions.
e-warning	Cautionary action styling for warnings.	Use for warning or alert actions.
e-danger	Negative action styling for destructive actions.	Use for delete or destructive actions.

app.jsx
app.tsx
import { SpeedDialComponent } 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>
    {/* Initialize the SpeedDial component with applied warning style */}
    <SpeedDialComponent id='speeddial' content='Edit' cssClass='e-warning' target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
import { SpeedDialComponent } 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>
      {/* Initialize the SpeedDial component with applied warning style */}
      <SpeedDialComponent id='speeddial' content='Edit' cssClass='e-warning' target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

Visible

Control the visibility of the SpeedDial button using the visible property. Set it to true to show the button or false to hide it. This is useful for conditionally displaying the SpeedDial based on user permissions or context.

{/* Import the Speed Dial. */}
import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

{/* To render Speed Dial.*/}
function App() {

  return (
      {/* Initialize the SpeedDial component in hidden state */}
      <SpeedDialComponent id='speeddial' content='Edit' visible={false} target="#targetElement"></SpeedDialComponent>
  );
}
export default App;

Display a tooltip on hover over the SpeedDial button by setting the title attribute. Tooltips provide helpful context about the button’s purpose without cluttering the UI, improving user experience.

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

  return (
    <div>
      <div id="targetElement" style=></div>
      {/* Initialize the SpeedDial component */}
      <SpeedDialComponent id='speeddial' items={items} openIconCss='e-icons e-edit' target='#targetElement'></SpeedDialComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

Opens on hover

Enable the opensOnHover property to automatically open action items when the user hovers over the SpeedDial button. By default, items only display on click. Enabling hover opening creates a more fluid interaction pattern.

app.jsx
app.tsx
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>
    {/* Initialize the SpeedDial component */}
    <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} opensOnHover={true} target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
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>
      {/* Initialize the SpeedDial component */}
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} opensOnHover={true} target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

Customized icon

Create custom button appearances by using the cssClass property to apply custom CSS styles. Define your own CSS rules to customize colors, sizes, borders, and other visual properties. The following example demonstrates how to apply custom styling to the SpeedDial button.

app.jsx
app.tsx
index.css
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>
    {/* Initialize the SpeedDial component */}
    <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} target="#targetElement" cssClass='custom-css'></SpeedDialComponent>
  </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));
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>
      {/* Initialize the SpeedDial component */}
      <SpeedDialComponent id='speeddial' openIconCss='e-icons e-edit' closeIconCss='e-icons e-close' items={items} target="#targetElement" cssClass='custom-css'></SpeedDialComponent>
    </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%;
}

.custom-css .e-btn-icon {
  color: darkgreen;
}

Search docs

Ask HelpBot