Back to all questions

Is there a floating action button component?

Last updated

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

Floating action button is at the bottom of the screen

import { IconPhone } from '@tabler/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}>
          <IconPhone stroke={1.5} size={30} />
        </ActionIcon>
      </Affix>
    </>
  );
}