Our Tailwind CSS pagination can be used to show different actions when hovering the button.
See below our SpeedDial
component example 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.
import {
IconButton,
SpeedDial,
SpeedDialHandler,
SpeedDialContent,
SpeedDialAction,
} from "@material-tailwind/react";
import {
PlusIcon,
HomeIcon,
CogIcon,
Square3Stack3DIcon,
} from "@heroicons/react/24/outline";
export default function DefaultSpeedDial() {
return (
<div className="relative w-full h-80">
<div className="absolute bottom-0 right-0">
<SpeedDial>
<SpeedDialHandler>
<IconButton size="lg" className="rounded-full">
<PlusIcon className="h-5 w-5 transition-transform group-hover:rotate-45" />
</IconButton>
</SpeedDialHandler>
<SpeedDialContent>
<SpeedDialAction>
<HomeIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<CogIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<Square3Stack3DIcon className="h-5 w-5" />
</SpeedDialAction>
</SpeedDialContent>
</SpeedDial>
</div>
</div>
);
}
Use the example below for using SpeedDial
with different placements in a page.
import {
IconButton,
SpeedDial,
SpeedDialHandler,
SpeedDialContent,
SpeedDialAction,
} from "@material-tailwind/react";
import {
PlusIcon,
HomeIcon,
CogIcon,
Square3Stack3DIcon,
} from "@heroicons/react/24/outline";
export default function Example() {
return (
<div className="relative h-80 w-full">
<div className="absolute bottom-0 right-0">
<SpeedDial placement="top">
<SpeedDialHandler>
<IconButton size="lg" className="rounded-full">
<PlusIcon className="h-5 w-5 transition-transform group-hover:rotate-45" />
</IconButton>
</SpeedDialHandler>
<SpeedDialContent>
<SpeedDialAction>
<HomeIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<CogIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<Square3Stack3DIcon className="h-5 w-5" />
</SpeedDialAction>
</SpeedDialContent>
</SpeedDial>
</div>
<div className="absolute bottom-0 left-0">
<SpeedDial placement="right">
<SpeedDialHandler>
<IconButton size="lg" className="rounded-full">
<PlusIcon className="h-5 w-5 transition-transform group-hover:rotate-45" />
</IconButton>
</SpeedDialHandler>
<SpeedDialContent className="flex-row">
<SpeedDialAction>
<HomeIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<CogIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<Square3Stack3DIcon className="h-5 w-5" />
</SpeedDialAction>
</SpeedDialContent>
</SpeedDial>
</div>
<div className="absolute top-0 left-0">
<SpeedDial placement="bottom">
<SpeedDialHandler>
<IconButton size="lg" className="rounded-full">
<PlusIcon className="h-5 w-5 transition-transform group-hover:rotate-45" />
</IconButton>
</SpeedDialHandler>
<SpeedDialContent>
<SpeedDialAction>
<HomeIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<CogIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<Square3Stack3DIcon className="h-5 w-5" />
</SpeedDialAction>
</SpeedDialContent>
</SpeedDial>
</div>
<div className="absolute top-0 right-0">
<SpeedDial placement="left">
<SpeedDialHandler>
<IconButton size="lg" className="rounded-full">
<PlusIcon className="h-5 w-5 transition-transform group-hover:rotate-45" />
</IconButton>
</SpeedDialHandler>
<SpeedDialContent className="flex-row">
<SpeedDialAction>
<HomeIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<CogIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<Square3Stack3DIcon className="h-5 w-5" />
</SpeedDialAction>
</SpeedDialContent>
</SpeedDial>
</div>
</div>
);
}
Use the example below for using custom icon for SpeedDial
handler.
import {
IconButton,
SpeedDial,
SpeedDialHandler,
SpeedDialContent,
SpeedDialAction,
} from "@material-tailwind/react";
import {
EnvelopeIcon,
EnvelopeOpenIcon,
HomeIcon,
CogIcon,
Square3Stack3DIcon,
} from "@heroicons/react/24/outline";
export default function Example() {
return (
<div className="relative w-full h-80">
<div className="absolute bottom-0 right-0">
<SpeedDial>
<SpeedDialHandler>
<IconButton size="lg" className="rounded-full">
<EnvelopeOpenIcon className="hidden h-5 w-5 group-hover:block" />
<EnvelopeIcon className="block h-5 w-5 group-hover:hidden" />
</IconButton>
</SpeedDialHandler>
<SpeedDialContent>
<SpeedDialAction>
<HomeIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<CogIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<Square3Stack3DIcon className="h-5 w-5" />
</SpeedDialAction>
</SpeedDialContent>
</SpeedDial>
</div>
</div>
);
}
Use the example below to make the SpeedDial
a controlled component using React state. This is helpful if you need the open/close
states of SpeedDial
.
import React from "react";
import {
IconButton,
SpeedDial,
SpeedDialHandler,
SpeedDialContent,
SpeedDialAction,
} from "@material-tailwind/react";
import {
PlusIcon,
HomeIcon,
CogIcon,
Square3Stack3DIcon,
} from "@heroicons/react/24/outline";
export default function Example() {
const [open, setOpen] = React.useState(false);
return (
<div className="relative h-80 w-full">
<div className="absolute bottom-0 right-0">
<SpeedDial open={open} handler={setOpen}>
<SpeedDialHandler>
<IconButton size="lg" className="rounded-full">
<PlusIcon className="h-5 w-5 transition-transform group-hover:rotate-45" />
</IconButton>
</SpeedDialHandler>
<SpeedDialContent>
<SpeedDialAction>
<HomeIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<CogIcon className="h-5 w-5" />
</SpeedDialAction>
<SpeedDialAction>
<Square3Stack3DIcon className="h-5 w-5" />
</SpeedDialAction>
</SpeedDialContent>
</SpeedDial>
</div>
</div>
);
}
Use the example below for a SpeedDial
that has a label inside of it's actions.
import {
IconButton,
SpeedDial,
SpeedDialHandler,
SpeedDialContent,
SpeedDialAction,
Typography,
} from "@material-tailwind/react";
import {
PlusIcon,
HomeIcon,
CogIcon,
Square3Stack3DIcon,
} from "@heroicons/react/24/outline";
export default function Example() {
return (
<div className="relative h-80 w-full">
<div className="absolute bottom-0 right-0">
<SpeedDial>
<SpeedDialHandler>
<IconButton size="lg" className="rounded-full">
<PlusIcon className="h-5 w-5 transition-transform group-hover:rotate-45" />
</IconButton>
</SpeedDialHandler>
<SpeedDialContent>
<SpeedDialAction className="h-16 w-16">
<HomeIcon className="h-5 w-5" />
<Typography color="blue-gray" className="text-xs font-normal">
Home
</Typography>
</SpeedDialAction>
<SpeedDialAction className="h-16 w-16">
<CogIcon className="h-5 w-5" />
<Typography color="blue-gray" className="text-xs font-normal">
Settings
</Typography>
</SpeedDialAction>
<SpeedDialAction className="h-16 w-16">
<Square3Stack3DIcon className="h-5 w-5" />
<Typography color="blue-gray" className="text-xs font-normal">
Pages
</Typography>
</SpeedDialAction>
</SpeedDialContent>
</SpeedDial>
</div>
</div>
);
}
Use the example below for a SpeedDial
that has a label outside of it's actions.
import {
IconButton,
SpeedDial,
SpeedDialHandler,
SpeedDialContent,
SpeedDialAction,
Typography,
} from "@material-tailwind/react";
import {
PlusIcon,
HomeIcon,
CogIcon,
Square3Stack3DIcon,
} from "@heroicons/react/24/outline";
export default function Example() {
const labelProps = {
variant: "small",
color: "blue-gray",
className:
"absolute top-2/4 -left-2/4 -translate-y-2/4 -translate-x-3/4 font-normal",
};
return (
<div className="relative h-80 w-full">
<div className="absolute bottom-0 right-0">
<SpeedDial>
<SpeedDialHandler>
<IconButton size="lg" className="rounded-full">
<PlusIcon className="h-5 w-5 transition-transform group-hover:rotate-45" />
</IconButton>
</SpeedDialHandler>
<SpeedDialContent>
<SpeedDialAction className="relative">
<HomeIcon className="h-5 w-5" />
<Typography {...labelProps}>Home</Typography>
</SpeedDialAction>
<SpeedDialAction className="relative">
<CogIcon className="h-5 w-5" />
<Typography {...labelProps}>Settings</Typography>
</SpeedDialAction>
<SpeedDialAction className="relative">
<Square3Stack3DIcon className="h-5 w-5" />
<Typography {...labelProps}>Pages</Typography>
</SpeedDialAction>
</SpeedDialContent>
</SpeedDial>
</div>
</div>
);
}