Badge

Display badge, pill or tag

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Default light badge

Dot badge

Outline badge

Filled badge

<Badge>Default light badge</Badge>
<Badge variant="dot">Dot badge</Badge>
<Badge variant="outline">Outline badge</Badge>
<Badge variant="filled">Filled badge</Badge>

Colors

Default Badge color is theme.primaryColor. You can use any color defined in theme.colors. Note that not all colors in some variants are compatible with dark theme:

dark

gray

red

pink

grape

violet

indigo

blue

cyan

teal

green

lime

yellow

orange

dark

gray

red

pink

grape

violet

indigo

blue

cyan

teal

green

lime

yellow

orange

dark

gray

red

pink

grape

violet

indigo

blue

cyan

teal

green

lime

yellow

orange

dark

gray

red

pink

grape

violet

indigo

blue

cyan

teal

green

lime

yellow

orange

Gradient variant

To use gradient as Badge background:

set variant to gradient
set gradient to { from: 'color-from', to: 'color-to', deg: 135 }, where
- color-from and color-to are color from theme.colors
- deg is linear gradient deg

Indigo cyan

Lime green

Teal blue

Orange red

Grape pink

<Badge variant="gradient" gradient={{ from: 'indigo', to: 'cyan' }}>Indigo cyan</Badge>
<Badge variant="gradient" gradient={{ from: 'teal', to: 'lime', deg: 105 }}>Lime green</Badge>
<Badge variant="gradient" gradient={{ from: 'teal', to: 'blue', deg: 60 }}>Teal blue</Badge>
<Badge variant="gradient" gradient={{ from: 'orange', to: 'red' }}>Orange red</Badge>
<Badge variant="gradient" gradient={{ from: 'grape', to: 'pink', deg: 35 }}>Grape pink</Badge>

Control badge font-size, height and padding with size and border-radius with radius. Both props have predefined values: xs, sm, md, lg, xl. Alternatively, you can use a number to set radius in px:

<Badge radius="lg" /> // -> theme predefined large radius
<Badge radius={10} /> // -> { borderRadius: '10px' }
<Badge size="sm" /> // -> predefined small size

Predefined sizes from xs to xl:

xs size

sm size

md size

lg size

xl size

Theme radius from xs to xl:

xs radius

sm radius

md radius

lg radius

xl radius

You can get predefined badge heights by importing BADGE_SIZES:

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

Size	Badge height
xs	16px
sm	18px
md	20px
lg	26px
xl	32px

Full width and overflow

Badge will take full width of container if you set fullWidth prop. If badge cannot fit in its container, overflow content will be hidden with ellipsis:

Full width badge

Badge with overflow

<div style={{ width: 200 }}>
  <Badge variant="filled" fullWidth>
    Full width badge
  </Badge>
</div>

<div style={{ width: 120 }}>
  <Badge variant="filled" fullWidth>
    Badge with overflow
  </Badge>
</div>

Right and left sections

You can add any react node as right and left section to badge. Use it to add interactive parts (for example, remove button) or additional information:

Badge with Avatar

Badge with right section

Badge with left section

import React from 'react';
import { ActionIcon, Avatar, Badge, Group } from '@mantine/core';

function Demo() {
  const avatar = (
    <Avatar
      alt="Avatar for badge"
      size={24}
      style={{ marginRight: 5 }}
      src="image-link"
    />
  );

  const removeButton = (
    <ActionIcon size="xs" color="blue" radius="xl" variant="transparent">
      <Cross1Icon style={{ width: 10, height: 10 }} />
    </ActionIcon>
  );

  return (
    <Group>
      <Badge style={{ paddingLeft: 0 }} size="lg" color="teal" leftSection={avatar}>
        Badge with Avatar
      </Badge>

      <Badge variant="outline" style={{ paddingRight: 3 }} rightSection={removeButton}>
        Badge with right section
      </Badge>

      <Badge variant="outline" style={{ paddingLeft: 3 }} leftSection={removeButton}>
        Badge with left section
      </Badge>
    </Group>
  );
}

Custom component

You can change badge root element by passing React element to component prop.

Link badge

$$$ Get lots of money $$$

const CustomComponent = ({ pads, children, ...others }) => (
  <div {...others}>
    {pads} {children} {pads}
  </div>
);

<Badge component="a" href="https://mantine.dev" variant="outline">
  Link badge
</Badge>

<Badge component={CustomComponent} pads="$$$" variant="filled">
  Get lots of money
</Badge>