Styles in React Speed Dial

9 Aug 20269 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.

Button styling

Customize the appearance of the SpeedDial button using the cssClass property to apply predefined semantic styles or custom CSS. Configure button icons using openIconCss and closeIconCss properties for different states.

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. 
import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import '../index.css';

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

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

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 { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import '../index.css';

function App() {
  return (<div>
    <div id="targetElement" style=></div>
    {/* Initialize the SpeedDial component in hidden state */}
    <SpeedDialComponent id='speeddial' content='Edit' visible={false} target="#targetElement"></SpeedDialComponent>
  </div>);
}
export default App;
createRoot(document.getElementById('button')).render(<App />);
import { SpeedDialComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import '../index.css';

function App() {
  return (
    <div>
      <div id="targetElement" style=></div>
      {/* Initialize the SpeedDial component in hidden state */}
      <SpeedDialComponent id='speeddial' content='Edit' visible={false} target="#targetElement"></SpeedDialComponent>
    </div>
  );
}
export default App;
createRoot(document.getElementById('button')!).render(<App />);
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

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.

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

For more configuration options related to item appearance and behavior, refer to the following documentation:

  • Item Display Types - Learn how to configure icon-only, text-only, and icon-with-text display modes for Speed Dial items
  • Item States - Explore disabled item states and styling
  • Item Tooltips - Configure tooltips for Speed Dial items using the title property
  • Opening Behavior - Configure Speed Dial to open items on hover instead of click