React MUI SpeedDialAction API

Last Updated : 01 Aug, 2022

Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI SpeedDialIcon API. The SpeedDials are used to display three to six actions immediately. SpeedDialActions are the action elements that are displayed on hover. The API provides a lot of functionality and we will learn to implement them.

Import SpeedDialAction API:

import SpeedDialAction from '@mui/material/SpeedDialAction';
// or
import { SpeedDialAction } from '@mui/material';

Props List: Here is the list of props used with this component. We can access them and modify them according to our needs.

classes (object): This overrides the existing styles or adds new styles to the component.
sx (Array<func/object/bool> func/object): The system prop allows defining system overrides as well as additional CSS styles.
icon (node): It is the icon displayed in the Fab icon.
delay (number): It is used to add a transition delay when opened. The default value is 0.
FabProps (object): It is the props applied to the Fab element. The default value is {}.
id (string): It is used to set the id of Action for the accessibility feature.
open (bool): If true, the action is shown. The default value is false.
TooltipClasses (object): It is the classes applied to the Tooltip element.
tooltipOpen (bool): If set to true, the tooltip is always shown. The default value is false.
tooltipPlacement (bottom-end/bottom-start/bottom/left-end/left-start/left/right-end/right-start/right/top-end/top-start/top): It is used to set the placement of the tooltip. The default value is left.
tooltipTitle (node): Label to be displayed when the tooltip is opened.

CSS Rules:

fab (.MuiSpeedDialAction-fab): It is the style applied to the fab element.
fabClosed ( .MuiSpeedDialAction-fabClosed): It is the style applied to the Fab component if open is set to false.
staticTooltip(.MuiSpeedDialAction-staticTooltip): It is the style applied to the root element if tooltipOpen is set to true.
staticTooltipClosed (.MuiSpeedDialAction-staticTooltipClosed): It is the style applied to the root element if tooltipOpen is set to true and open is set to false.
staticTooltipLabel (.MuiSpeedDialAction-staticTooltipLabel): It is the style applied to the static tooltip label if tooltipOpen is set to true.
tooltipPlacementLeft (.MuiSpeedDialAction-tooltipPlacementLeft): It is the style applied to the root element if tooltipOpen set to true and tooltipPlacement set to left.
tooltipPlacementRight (.MuiSpeedDialAction-tooltipPlacementRight): It is the style applied to the root element if tooltipOpen set to true and tooltipPlacement set to right.

Syntax: Create SpeedDialAction inside SpeedDial as follows:

<SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
/>

Installing and Creating React app, and adding the MUI dependencies:

Step 1: Create a react project using the following command.

npx create-react-app gfg_tutorial

Step 2: Get into the project directory

cd gfg_tutorial

Step 3: Install the MUI dependencies as follows:

npm install @mui/material @emotion/react @emotion/styled @mui/lab @mui/icons-material

Step 4: Run the project as follows:

npm start

Example 1: In the following example, we have SpeedDialActions in the SpeedDial.

App.js

Javascript

import "./App.css"; 
import * as React from "react"; 
import Box from "@mui/material/Box"; 
import SpeedDial from "@mui/material/SpeedDial"; 
import SpeedDialIcon from "@mui/material/SpeedDialIcon"; 
import SpeedDialAction from "@mui/material/SpeedDialAction"; 
import { Css, Html, Javascript } from "@mui/icons-material"; 
  
const actions = [ 
    { icon: <Html />, name: "HTML" }, 
    { icon: <Css />, name: "CSS" }, 
    { icon: <Javascript />, name: "Javascript" }, 
]; 
  
function App() { 
    return ( 
        <div className="App"> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI SpeedDialAction API</strong> 
            </div> 
            <br /> 
            <Box sx={{  
                height: 320,  
                transform: "translateZ(0px)",  
                flexGrow: 1  
            }}> 
                <SpeedDial 
                    ariaLabel="SpeedDial basic example"
                    sx={{  
                        position: "absolute",  
                        bottom: 16,  
                        right: 16  
                    }} 
                    icon={<SpeedDialIcon />} 
                > 
                    {actions.map((action) => ( 
                        <SpeedDialAction 
                            key={action.name} 
                            icon={action.icon} 
                            tooltipTitle={action.name} 
                        /> 
                    ))} 
                </SpeedDial> 
            </Box> 
        </div> 
    ); 
} 
  
export default App;

Output:

Example 2: In the following example, we have kept the tooltip open.

App.js

Javascript

import "./App.css"; 
import * as React from "react"; 
import Box from "@mui/material/Box"; 
import SpeedDial from "@mui/material/SpeedDial"; 
import SpeedDialIcon from "@mui/material/SpeedDialIcon"; 
import SpeedDialAction from "@mui/material/SpeedDialAction"; 
import { Css, Html, Javascript } from "@mui/icons-material"; 
  
const actions = [ 
    { icon: <Html />, name: "HTML" }, 
    { icon: <Css />, name: "CSS" }, 
    { icon: <Javascript />, name: "Javascript" }, 
]; 
  
function App() { 
    return ( 
        <div className="App"> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong>React MUI SpeedDialAction API</strong> 
            </div> 
            <br /> 
            <Box sx={{  
                height: 320,  
                transform: "translateZ(0px)",  
                flexGrow: 1  
            }}> 
                <SpeedDial 
                    ariaLabel="SpeedDial basic example"
                    sx={{  
                        position: "absolute",  
                        bottom: 16,  
                        right: 16  
                    }} 
                    icon={<SpeedDialIcon />} 
                > 
                    {actions.map((action) => ( 
                        <SpeedDialAction 
                            key={action.name} 
                            icon={action.icon} 
                            tooltipTitle={action.name} 
                            tooltipOpen 
                        /> 
                    ))} 
                </SpeedDial> 
            </Box> 
        </div> 
    ); 
} 
  
export default App;