Speed Dial

Reveal a small group of related floating actions.

This guide covers Material UI Core with the default Emotion engine; extensions and additional demos are explicitly classified.

Use case and business boundary

Actions must have meaningful labels and real handlers; opening the menu does not execute them. Configure native action tooltip titles through slotProps.tooltip.title, not removed tooltipTitle.

Native composition and scope

SpeedDial, SpeedDialAction, SpeedDialIcon

Preserve native Material UI composition and types; do not substitute JGuang UI/Base UI/Radix APIs. Example entries are not extra components.

Native installation and initialization

npm install @mui/material@9.4.0 @emotion/react@11.14.0 @emotion/styled@11.14.1

Use native npm and Emotion, not an invented JGuang UI Registry URL. Place examples inside native ThemeProvider; choose CssBaseline or ScopedCssBaseline for the project. Inspect React, existing providers, lockfile and SSR first. Never overwrite files or conceal peer conflicts. This batch verified React 19.2.8; React 18 and below require matching react-is. See the included bilingual setup guide.

Practical native parameters

These selected parameters are not a flattened universal API. Preserve the native declaring owner, slot structure, nullable values and generics.

Runnable native examples

Machine keys select example entries, not universal variant props. Native demo JSX/data stay unchanged; JGuang-authored acceptance fixtures are explicitly labelled.

• Basic speed dial · BasicSpeedDial · upstream native demo
• Playground · PlaygroundSpeedDial · upstream native demo
• Controlled speed dial · ControlledOpenSpeedDial · upstream native demo
• Custom close icon · OpenIconSpeedDial · upstream native demo
• Persistent action tooltips · SpeedDialTooltipOpen · upstream native demo

Actual usage example

Unmodified pinned native demo; copy its required local helper files together.

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 FileCopyIcon from '@mui/icons-material/FileCopyOutlined';
import SaveIcon from '@mui/icons-material/Save';
import PrintIcon from '@mui/icons-material/Print';
import ShareIcon from '@mui/icons-material/Share';

const actions = [
  { icon: <FileCopyIcon />, name: 'Copy' },
  { icon: <SaveIcon />, name: 'Save' },
  { icon: <PrintIcon />, name: 'Print' },
  { icon: <ShareIcon />, name: 'Share' },
];

export default function BasicSpeedDial() {
  return (
    <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}
            slotProps={{
              tooltip: {
                title: action.name,
              },
            }}
          />
        ))}
      </SpeedDial>
    </Box>
  );
}

Example dependency boundaries

@mui/material/Box, @mui/material/SpeedDial, @mui/material/SpeedDialIcon, @mui/material/SpeedDialAction, @mui/icons-material/FileCopyOutlined, @mui/icons-material/Save, @mui/icons-material/Print, @mui/icons-material/Share, react, @mui/material/styles, @mui/material/FormControl, @mui/material/FormControlLabel, @mui/material/FormLabel, @mui/material/Radio, @mui/material/RadioGroup, @mui/material/Switch, @mui/icons-material/Edit, @mui/material/Backdrop

Direct Icons/System/Utils example imports require their matching 9.4.0 packages. Relative data/helpers are part of the example closure, not extra components. Remote images and simulated operations do not supply a backend.

Pinned upstream API metadata reference

These tables retain the upstream metadata, not a newly inferred generic type system. Conditional generics, inherited props and callback details are defined by the source declarations below. Theme defaults may override metadata defaults.

SpeedDial

import SpeedDial from '@mui/material/SpeedDial';
import { SpeedDial } from '@mui/material';

SpeedDialAction

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

Native inheritance: Tooltip. Parent/DOM props are not fabricated as additional own props.

SpeedDialIcon

import SpeedDialIcon from '@mui/material/SpeedDialIcon';
import { SpeedDialIcon } from '@mui/material';

Native source declarations

Declarations/imports are extracted from pinned source without flattening unions or external inheritance. Original English comments/types are source reference, not a claim of translated upstream prose. Shared types stay in their native packages.

vendor/src/SpeedDial/SpeedDial.d.ts

import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { FabProps } from '../Fab';

import { TransitionProps } from '../transitions';

import { SpeedDialClasses } from './speedDialClasses';

import { CreateSlotsAndSlotProps, SlotComponentProps } from '../utils/types';

export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown';

export type OpenReason = 'toggle' | 'focus' | 'mouseEnter';

export interface SpeedDialSlots {
  /**
   * The component that renders the root slot.
   * @default 'div'
   */
  root: React.ElementType;
  /**
   * The component that renders the transition.
   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
   * @default Zoom
   */
  transition: React.ElementType;
}

export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps<
  SpeedDialSlots,
  {
    /**
     * Props forwarded to the root slot.
     * By default, the available props are based on div element.
     */
    root: SlotComponentProps<'div', React.HTMLAttributes<HTMLDivElement>, SpeedDialOwnerState>;
    /**
     * Props forwarded to the transition slot.
     * By default, the available props are based on the [Zoom](https://mui.com/material-ui/api/zoom/#props) component.
     */
    transition: SlotComponentProps<
      React.ElementType<TransitionProps>,
      TransitionProps,
      SpeedDialOwnerState
    >;
  }
>;

export interface SpeedDialProps
  extends
    Omit<StandardProps<React.HTMLAttributes<HTMLDivElement>, 'children'>, 'slots' | 'slotProps'>,
    SpeedDialSlotsAndSlotProps {
  /**
   * SpeedDialActions to display when the SpeedDial is `open`.
   */
  children?: React.ReactNode;
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<SpeedDialClasses> | undefined;
  /**
   * The aria-label of the button element.
   * Also used to provide the `id` for the `SpeedDial` element and its children.
   */
  ariaLabel: string;
  /**
   * The direction the actions open relative to the floating action button.
   * @default 'up'
   */
  direction?: 'up' | 'down' | 'left' | 'right' | undefined;
  /**
   * If `true`, the SpeedDial is hidden.
   * @default false
   */
  hidden?: boolean | undefined;
  /**
   * Props applied to the [`Fab`](https://mui.com/material-ui/api/fab/) element.
   * @default {}
   */
  FabProps?: Partial<FabProps> | undefined;
  /**
   * The icon to display in the SpeedDial Fab. The `SpeedDialIcon` component
   * provides a default Icon with animation.
   */
  icon?: React.ReactNode;
  /**
   * Callback fired when the component requests to be closed.
   *
   * @param {object} event The event source of the callback.
   * @param {string} reason Can be: `"toggle"`, `"blur"`, `"mouseLeave"`, `"escapeKeyDown"`.
   */
  onClose?: ((event: React.SyntheticEvent<{}>, reason: CloseReason) => void) | undefined;
  /**
   * Callback fired when the component requests to be open.
   *
   * @param {object} event The event source of the callback.
   * @param {string} reason Can be: `"toggle"`, `"focus"`, `"mouseEnter"`.
   */
  onOpen?: ((event: React.SyntheticEvent<{}>, reason: OpenReason) => void) | undefined;
  /**
   * If `true`, the component is shown.
   */
  open?: boolean | undefined;
  /**
   * The icon to display in the SpeedDial Fab when the SpeedDial is open.
   */
  openIcon?: React.ReactNode;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
  /**
   * The duration for the transition, in milliseconds.
   * You may specify a single timeout for all transitions, or individually with an object.
   * @default {
   *   enter: theme.transitions.duration.enteringScreen,
   *   exit: theme.transitions.duration.leavingScreen,
   * }
   */
  transitionDuration?: TransitionProps['timeout'] | undefined;
}

export interface SpeedDialOwnerState extends SpeedDialProps {}

export default function SpeedDial(props: SpeedDialProps): React.JSX.Element;

vendor/src/SpeedDialAction/SpeedDialAction.d.ts

import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { FabProps } from '../Fab';

import { TooltipProps } from '../Tooltip';

import { SpeedDialActionClasses } from './speedDialActionClasses';

import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';

export interface SpeedDialActionSlots {
  /**
   * The component that renders the fab.
   * @default Fab
   */
  fab?: React.ElementType | undefined;
  /**
   * The component that renders the tooltip.
   * @default Tooltip
   */
  tooltip?: React.ElementType | undefined;
  /**
   * The component that renders the static tooltip.
   * @default 'span'
   */
  staticTooltip?: React.ElementType | undefined;
  /**
   * The component that renders the static tooltip label.
   * @default 'span'
   */
  staticTooltipLabel?: React.ElementType | undefined;
}

export interface SpeedDialActionFabSlotPropsOverrides {}

export interface SpeedDialActionTooltipSlotPropsOverrides {}

export interface SpeedDialActionStaticTooltipSlotPropsOverrides {}

export interface SpeedDialActionStaticTooltipLabelSlotPropsOverrides {}

export type SpeedDialActionSlotsAndSlotProps = CreateSlotsAndSlotProps<
  SpeedDialActionSlots,
  {
    /**
     * Props forwarded to the fab slot.
     * By default, the available props are based on the [Fab](https://mui.com/material-ui/api/fab/#props) component.
     */
    fab: SlotProps<
      React.ElementType<FabProps>,
      SpeedDialActionFabSlotPropsOverrides,
      SpeedDialActionOwnerState
    >;
    /**
     * Props forwarded to the tooltip slot.
     * By default, the available props are based on the [Tooltip](https://mui.com/material-ui/api/tooltip/#props) component.
     */
    tooltip: SlotProps<
      React.ElementType<TooltipProps>,
      SpeedDialActionTooltipSlotPropsOverrides,
      SpeedDialActionOwnerState
    >;
    /**
     * Props forwarded to the static tooltip slot.
     * By default, the available props are based on a span element.
     */
    staticTooltip: SlotProps<
      'span',
      SpeedDialActionStaticTooltipSlotPropsOverrides,
      SpeedDialActionOwnerState
    >;
    /**
     * Props forwarded to the static tooltip label slot.
     * By default, the available props are based on a span element.
     */
    staticTooltipLabel: SlotProps<
      'span',
      SpeedDialActionStaticTooltipLabelSlotPropsOverrides,
      SpeedDialActionOwnerState
    >;
  }
>;

export interface SpeedDialActionProps
  extends
    Omit<StandardProps<Partial<TooltipProps>, 'children'>, 'slotProps' | 'slots'>,
    SpeedDialActionSlotsAndSlotProps {
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<SpeedDialActionClasses> | undefined;
  /**
   * Adds a transition delay, to allow a series of SpeedDialActions to be animated.
   * @default 0
   */
  delay?: number | undefined;
  /**
   * The icon to display in the SpeedDial Fab.
   */
  icon?: React.ReactNode;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

export default function SpeedDialAction(props: SpeedDialActionProps): React.JSX.Element;

export interface SpeedDialActionOwnerState extends Omit<
  SpeedDialActionProps,
  'slots' | 'slotProps'
> {}

vendor/src/SpeedDialIcon/SpeedDialIcon.d.ts

import * as React from 'react';

import { SxProps } from '@mui/system';

import { Theme } from '../styles';

import { InternalStandardProps as StandardProps } from '../internal';

import { SpeedDialIconClasses } from './speedDialIconClasses';

export interface SpeedDialIconProps extends StandardProps<
  React.HTMLAttributes<HTMLSpanElement>,
  'children'
> {
  /**
   * Override or extend the styles applied to the component.
   */
  classes?: Partial<SpeedDialIconClasses> | undefined;
  /**
   * The icon to display.
   */
  icon?: React.ReactNode;
  /**
   * The icon to display in the SpeedDial Floating Action Button when the SpeedDial is open.
   */
  openIcon?: React.ReactNode;
  /**
   * @ignore
   * If `true`, the component is shown.
   */
  open?: boolean | undefined;
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx?: SxProps<Theme> | undefined;
}

declare const SpeedDialIcon: ((props: SpeedDialIconProps) => React.JSX.Element) & {
  muiName: string;
};

Post-install acceptance

Run strict types, production build and real interactions. Check keyboard labels/focus, disabled/error/read-only semantics where natively supported, both themes, narrow screens and reduced motion. Verify callbacks against the real host data; do not declare installation complete from copying a prompt. Initialization fixtures also require server HTML and warning-free hydration.

Source and license

https://github.com/mui/material-ui/tree/809a7717b4c050ba3f69b75300689f07c050a16e

MIT · @mui/material@9.4.0. Vendor originals and license are preserved. Full original upstream prose remains in vendor/docs and is not represented as fully translated.