Back to all questions

Is there a floating action button component?

Last updated

Mantine does not include a floating action button component, but you can build it with the Affix and ActionIcon components:

Floating action button is at the bottom of the screen

import { PhoneIcon } from '@phosphor-icons/react';
import { ActionIcon, Affix, Text } from '@mantine/core';

function Demo() {
  return (
    <>
      <Text>Floating action button is at the bottom of the screen</Text>
      <Affix position={{ bottom: 40, right: 40 }}>
        <ActionIcon color="blue" radius="xl" size={60}>
          <PhoneIcon size={30} />
        </ActionIcon>
      </Affix>
    </>
  );
}