Center

Usage

import { Center, Box } from '@mantine/core';

function Demo() {
  return (
    <Center maw={400} h={100} bg="var(--mantine-color-gray-light)">
      <Box bg="var(--mantine-color-blue-light)">All elements inside Center are centered</Box>
    </Center>
  );
}

Inline

To use Center with inline elements, set the inline prop. For example, you can center a link icon and label:

import { Center, Anchor, Box } from '@mantine/core';
import { ArrowLeftIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <Anchor href="https://mantine.dev" target="_blank">
      <Center inline>
        <ArrowLeftIcon size={12} />
        <Box ml={5}>Back to Mantine website</Box>
      </Center>
    </Anchor>
  );
}

Polymorphic component

Center is a polymorphic component – its default root element is div, but it can be changed to any other element or component with the component prop:

import { Center } from '@mantine/core';

function Demo() {
  return <Center component="button" />;
}

Polymorphic components with TypeScript

Note that polymorphic component prop types are different from regular components – they do not extend HTML element props of the default element. For example, CenterProps does not extend React.ComponentProps'<'div'>' although div is the default element.

If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support the component prop), then your component props interface should extend HTML element props, for example:

import type { CenterProps, ElementProps } from '@mantine/core';

interface MyCenterProps extends CenterProps,
  ElementProps<'button', keyof CenterProps> {}

Expand code

If you want your component to remain polymorphic after wrapping, use the polymorphic function described in this guide.