Badge

Usage

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

function Demo() {
  return <Badge color="blue">Badge</Badge>;
}

Gradient variant

When variant prop is set to gradient, you can control gradient with gradient prop, it accepts an object with from, to and deg properties. If thegradient prop is not set, Badge will use theme.defaultGradient which can be configured on the theme object. gradient prop is ignored when variant is not gradient.

Note that variant="gradient" supports only linear gradients with two colors. If you need a more complex gradient, then use Styles API to modify Badge styles.

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

function Demo() {
  return (
    <Badge
      size="xl"
      variant="gradient"
      gradient={{ from: 'blue', to: 'cyan', deg: 90 }}
    >
      Gradient badge
    </Badge>
  );
}

Left and right sections

import { Badge, Group, rem } from '@mantine/core';
import { IconAt } from '@tabler/icons-react';

function Demo() {
  const icon = <IconAt style={{ width: rem(12), height: rem(12) }} />;
  return (
    <Group>
      <Badge leftSection={icon}>With left section</Badge>
      <Badge rightSection={icon}>With right section</Badge>
    </Group>
  );
}

Full width

Set fullWidth to make badge span full width of its parent element:

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

function Demo() {
  return <Badge fullWidth>Full width badge</Badge>;
}

Styles API

Badge supports Styles API, you can add styles to any inner element of the component withclassNames prop. Follow Styles API documentation to learn more.

/*
 * Hover over selectors to apply outline styles
 *
 */

Polymorphic component

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

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

function Demo() {
  return <Badge component="a" />;
}

You can also use components in component prop, for example, Next.js Link:

import Link from 'next/link';
import { Badge } from '@mantine/core';

function Demo() {
  return <Badge component={Link} href="/" />;
}

Polymorphic components with TypeScript

Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, BadgeProps does not extend React.ComponentPropsWithoutRef'<'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 component prop), then your component props interface should extend HTML element props, for example:

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

interface MyBadgeProps extends BadgeProps,
  ElementProps<'a', keyof BadgeProps> {}

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