v1.3.1
⌘K
Source codeDiscussReport issue

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

Size and radius

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 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';
SizeBadge height
xs16px
sm18px
md20px
lg26px
xl32px

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:

Avatar for badge
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>