Getting Started

Upgrade Guide

Integration Guide

Customization

Components

Core Elements

Forms

Data Display

Navigation

Layout

Plugins

Tailwind CSS Speed Dial - React

Our React and Tailwind CSS speeddial can be used to show different actions when hovering the button. You can create a speeddial component using the IconButton and Tooltip components.

See below our speeddial component examples that you can use in your Tailwind CSS and React project. The example comes in different styles, so you can adapt it easily to your needs.

Speed Dial Demo

Here's how to implement a simple speeddial component. It can be used for showing different actions when hovering the button.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

"use client";

import { Tooltip, IconButton } from "@material-tailwind/react";
import { HomeSimple, Plus, SelectFace3d, Settings } from "iconoir-react";

export function SpeedDialDemo() {
  return (
    <Tooltip interactive offset={4}>
      <Tooltip.Trigger as={IconButton} isCircular>
        <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
      </Tooltip.Trigger>
      <Tooltip.Content className="flex flex-col gap-1 bg-transparent shadow-none dark:bg-transparent">
        <Tooltip placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <HomeSimple className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Home
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <Settings className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Settings
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <SelectFace3d className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Dashboard
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
      </Tooltip.Content>
    </Tooltip>
  );
}

"use client";

import { Tooltip, IconButton } from "@material-tailwind/react";
import { HomeSimple, Plus, SelectFace3d, Settings } from "iconoir-react";

export function SpeedDialDemo() {
  return (
    <Tooltip interactive offset={4}>
      <Tooltip.Trigger as={IconButton} isCircular>
        <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
      </Tooltip.Trigger>
      <Tooltip.Content className="flex flex-col gap-1 bg-transparent shadow-none dark:bg-transparent">
        <Tooltip placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <HomeSimple className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Home
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <Settings className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Settings
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <SelectFace3d className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Dashboard
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
      </Tooltip.Content>
    </Tooltip>
  );
}

Speed Dial Placement

Use this example to show the speeddial component in different positions on the screen.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

"use client";

import { Tooltip, IconButton } from "@material-tailwind/react";
import { HomeSimple, Plus, SelectFace3d, Settings } from "iconoir-react";

export function SpeedDialPlacement() {
  return (
    <div className="relative h-80 w-full">
      <div className="absolute left-0 top-0">
        <Tooltip interactive offset={4} placement="bottom">
          <Tooltip.Trigger as={IconButton} isCircular>
            <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
          </Tooltip.Trigger>
          <Tooltip.Content className="flex flex-col gap-1 bg-transparent shadow-none dark:bg-transparent">
            <Tooltip placement="left">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <HomeSimple className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Home
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip placement="left">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <Settings className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Settings
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip placement="left">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <SelectFace3d className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Dashboard
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
          </Tooltip.Content>
        </Tooltip>
      </div>
      <div className="absolute right-0 top-0">
        <Tooltip interactive offset={4} placement="left">
          <Tooltip.Trigger as={IconButton} isCircular>
            <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
          </Tooltip.Trigger>
          <Tooltip.Content className="flex gap-1 bg-transparent shadow-none">
            <Tooltip placement="top">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <HomeSimple className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Home
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip placement="top">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <Settings className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Settings
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip placement="top">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <SelectFace3d className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Dashboard
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
          </Tooltip.Content>
        </Tooltip>
      </div>
      <div className="absolute bottom-0 left-0">
        <Tooltip interactive offset={4} placement="right">
          <Tooltip.Trigger as={IconButton} isCircular>
            <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
          </Tooltip.Trigger>
          <Tooltip.Content className="flex gap-1 bg-transparent shadow-none">
            <Tooltip>
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <HomeSimple className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Home
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip>
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <Settings className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Settings
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip>
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <SelectFace3d className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Dashboard
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
          </Tooltip.Content>
        </Tooltip>
      </div>
      <div className="absolute bottom-0 right-0">
        <Tooltip interactive offset={4} placement="top">
          <Tooltip.Trigger as={IconButton} isCircular>
            <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
          </Tooltip.Trigger>
          <Tooltip.Content className="flex flex-col gap-1 bg-transparent shadow-none">
            <Tooltip placement="left">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <HomeSimple className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Home
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip placement="left">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <Settings className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Settings
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip placement="left">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <SelectFace3d className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Dashboard
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
          </Tooltip.Content>
        </Tooltip>
      </div>
    </div>
  );
}

"use client";

import { Tooltip, IconButton } from "@material-tailwind/react";
import { HomeSimple, Plus, SelectFace3d, Settings } from "iconoir-react";

export function SpeedDialPlacement() {
  return (
    <div className="relative h-80 w-full">
      <div className="absolute left-0 top-0">
        <Tooltip interactive offset={4} placement="bottom">
          <Tooltip.Trigger as={IconButton} isCircular>
            <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
          </Tooltip.Trigger>
          <Tooltip.Content className="flex flex-col gap-1 bg-transparent shadow-none dark:bg-transparent">
            <Tooltip placement="left">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <HomeSimple className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Home
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip placement="left">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <Settings className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Settings
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip placement="left">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <SelectFace3d className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Dashboard
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
          </Tooltip.Content>
        </Tooltip>
      </div>
      <div className="absolute right-0 top-0">
        <Tooltip interactive offset={4} placement="left">
          <Tooltip.Trigger as={IconButton} isCircular>
            <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
          </Tooltip.Trigger>
          <Tooltip.Content className="flex gap-1 bg-transparent shadow-none">
            <Tooltip placement="top">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <HomeSimple className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Home
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip placement="top">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <Settings className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Settings
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip placement="top">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <SelectFace3d className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Dashboard
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
          </Tooltip.Content>
        </Tooltip>
      </div>
      <div className="absolute bottom-0 left-0">
        <Tooltip interactive offset={4} placement="right">
          <Tooltip.Trigger as={IconButton} isCircular>
            <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
          </Tooltip.Trigger>
          <Tooltip.Content className="flex gap-1 bg-transparent shadow-none">
            <Tooltip>
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <HomeSimple className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Home
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip>
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <Settings className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Settings
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip>
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <SelectFace3d className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Dashboard
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
          </Tooltip.Content>
        </Tooltip>
      </div>
      <div className="absolute bottom-0 right-0">
        <Tooltip interactive offset={4} placement="top">
          <Tooltip.Trigger as={IconButton} isCircular>
            <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
          </Tooltip.Trigger>
          <Tooltip.Content className="flex flex-col gap-1 bg-transparent shadow-none">
            <Tooltip placement="left">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <HomeSimple className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Home
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip placement="left">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <Settings className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Settings
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
            <Tooltip placement="left">
              <Tooltip.Trigger as={IconButton} isCircular color="secondary">
                <SelectFace3d className="h-[18px] w-[18px]" />
              </Tooltip.Trigger>
              <Tooltip.Content>
                Dashboard
                <Tooltip.Arrow />
              </Tooltip.Content>
            </Tooltip>
          </Tooltip.Content>
        </Tooltip>
      </div>
    </div>
  );
}

Speed Dial Custom Icon

You can use custom icons in the speeddial component. Use the example below to create a speeddial component with custom icon of your choice.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

"use client";

import { Tooltip, IconButton } from "@material-tailwind/react";
import { HomeSimple, Mail, SelectFace3d, Settings } from "iconoir-react";

export function SpeedDialCustomIcon() {
  return (
    <Tooltip interactive offset={4}>
      <Tooltip.Trigger as={IconButton} isCircular>
        <Mail className="h-[18px] w-[18px]" />
      </Tooltip.Trigger>
      <Tooltip.Content className="flex flex-col gap-1 bg-transparent shadow-none dark:bg-transparent">
        <Tooltip placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <HomeSimple className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Home
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <Settings className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Settings
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <SelectFace3d className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Dashboard
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
      </Tooltip.Content>
    </Tooltip>
  );
}

"use client";

import { Tooltip, IconButton } from "@material-tailwind/react";
import { HomeSimple, Mail, SelectFace3d, Settings } from "iconoir-react";

export function SpeedDialCustomIcon() {
  return (
    <Tooltip interactive offset={4}>
      <Tooltip.Trigger as={IconButton} isCircular>
        <Mail className="h-[18px] w-[18px]" />
      </Tooltip.Trigger>
      <Tooltip.Content className="flex flex-col gap-1 bg-transparent shadow-none dark:bg-transparent">
        <Tooltip placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <HomeSimple className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Home
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <Settings className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Settings
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <SelectFace3d className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Dashboard
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
      </Tooltip.Content>
    </Tooltip>
  );
}

Speed Dial with Label

Use this example to show the speeddial component with a label. You can use the open prop for the inner Tooltip component to show the label by default.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

"use client";

import { Tooltip, IconButton } from "@material-tailwind/react";
import { HomeSimple, Plus, SelectFace3d, Settings } from "iconoir-react";

export function SpeedDialWithLabel() {
  return (
    <Tooltip interactive offset={4}>
      <Tooltip.Trigger as={IconButton} isCircular>
        <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
      </Tooltip.Trigger>
      <Tooltip.Content className="flex flex-col gap-1 bg-transparent shadow-none dark:bg-transparent">
        <Tooltip open placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <HomeSimple className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Home
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip open placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <Settings className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Settings
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip open placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <SelectFace3d className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Dashboard
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
      </Tooltip.Content>
    </Tooltip>
  );
}

"use client";

import { Tooltip, IconButton } from "@material-tailwind/react";
import { HomeSimple, Plus, SelectFace3d, Settings } from "iconoir-react";

export function SpeedDialWithLabel() {
  return (
    <Tooltip interactive offset={4}>
      <Tooltip.Trigger as={IconButton} isCircular>
        <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
      </Tooltip.Trigger>
      <Tooltip.Content className="flex flex-col gap-1 bg-transparent shadow-none dark:bg-transparent">
        <Tooltip open placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <HomeSimple className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Home
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip open placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <Settings className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Settings
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip open placement="left">
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <SelectFace3d className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Dashboard
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
      </Tooltip.Content>
    </Tooltip>
  );
}

Speed Dial Horizontal

Use this example to show the speeddial in a horizontal layout.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

"use client";

import { Tooltip, IconButton } from "@material-tailwind/react";
import { HomeSimple, Plus, SelectFace3d, Settings } from "iconoir-react";

export function SpeedDialHorizontal() {
  return (
    <Tooltip interactive offset={0} placement="right">
      <Tooltip.Trigger as={IconButton} isCircular>
        <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
      </Tooltip.Trigger>
      <Tooltip.Content className="flex gap-1 bg-transparent shadow-none dark:bg-transparent">
        <Tooltip>
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <HomeSimple className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Home
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip>
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <Settings className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Settings
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip>
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <SelectFace3d className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Dashboard
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
      </Tooltip.Content>
    </Tooltip>
  );
}

"use client";

import { Tooltip, IconButton } from "@material-tailwind/react";
import { HomeSimple, Plus, SelectFace3d, Settings } from "iconoir-react";

export function SpeedDialHorizontal() {
  return (
    <Tooltip interactive offset={0} placement="right">
      <Tooltip.Trigger as={IconButton} isCircular>
        <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
      </Tooltip.Trigger>
      <Tooltip.Content className="flex gap-1 bg-transparent shadow-none dark:bg-transparent">
        <Tooltip>
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <HomeSimple className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Home
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip>
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <Settings className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Settings
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
        <Tooltip>
          <Tooltip.Trigger as={IconButton} isCircular color="secondary">
            <SelectFace3d className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
          <Tooltip.Content>
            Dashboard
            <Tooltip.Arrow />
          </Tooltip.Content>
        </Tooltip>
      </Tooltip.Content>
    </Tooltip>
  );
}

Speed Dial with Custom Styles

You can use the className prop to create your own custom speeddial component using the IconButton and Tooltip components.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

"use client";

import { Tooltip, IconButton } from "@material-tailwind/react";
import { HomeSimple, Plus, SelectFace3d, Settings } from "iconoir-react";

export function SpeedDialWithCustomStyles() {
  return (
    <Tooltip interactive offset={4}>
      <Tooltip.Trigger as={IconButton} color="secondary" isCircular>
        <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
      </Tooltip.Trigger>
      <Tooltip.Content className="dark:bg-background-dark flex flex-col gap-1 rounded-full border border-surface bg-background p-1 dark:border-surface">
        <Tooltip placement="left">
          <Tooltip.Trigger
            as={IconButton}
            color="secondary"
            className="p-3"
            isCircular
          >
            <HomeSimple className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
        </Tooltip>
        <Tooltip placement="left">
          <Tooltip.Trigger
            as={IconButton}
            color="secondary"
            className="p-3"
            isCircular
          >
            <Settings className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
        </Tooltip>
        <Tooltip placement="left">
          <Tooltip.Trigger
            as={IconButton}
            color="secondary"
            className="p-3"
            isCircular
          >
            <SelectFace3d className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
        </Tooltip>
      </Tooltip.Content>
    </Tooltip>
  );
}

"use client";

import { Tooltip, IconButton } from "@material-tailwind/react";
import { HomeSimple, Plus, SelectFace3d, Settings } from "iconoir-react";

export function SpeedDialWithCustomStyles() {
  return (
    <Tooltip interactive offset={4}>
      <Tooltip.Trigger as={IconButton} color="secondary" isCircular>
        <Plus className="h-[18px] w-[18px] transition-transform group-data-[open=true]:rotate-45" />
      </Tooltip.Trigger>
      <Tooltip.Content className="dark:bg-background-dark flex flex-col gap-1 rounded-full border border-surface bg-background p-1 dark:border-surface">
        <Tooltip placement="left">
          <Tooltip.Trigger
            as={IconButton}
            color="secondary"
            className="p-3"
            isCircular
          >
            <HomeSimple className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
        </Tooltip>
        <Tooltip placement="left">
          <Tooltip.Trigger
            as={IconButton}
            color="secondary"
            className="p-3"
            isCircular
          >
            <Settings className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
        </Tooltip>
        <Tooltip placement="left">
          <Tooltip.Trigger
            as={IconButton}
            color="secondary"
            className="p-3"
            isCircular
          >
            <SelectFace3d className="h-[18px] w-[18px]" />
          </Tooltip.Trigger>
        </Tooltip>
      </Tooltip.Content>
    </Tooltip>
  );
}

On this page

Scroll to top

book

Roots of UI/UX Design

By Creative TimLearn to Develop Intuitive Web Experiences