v3.6.14
Discord
Source code

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

Badge supports all colors from 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>

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, 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

Full width and overflow

Badge will take full width of container if fullWidth prop is true. 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

Avatar for badge
Badge with Avatar
Badge with right section
Badge with left section
import { ActionIcon, Avatar, Badge, Group } from '@mantine/core';


function Demo() {
  const avatar = (
    <Avatar
      alt="Avatar for badge"
      size={24}
      mr={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 sx={{ paddingLeft: 0 }} size="lg" color="teal" leftSection={avatar}>
        Badge with Avatar
      </Badge>


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


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

Custom component

To change badge root element pass 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>

To use custom component with TypeScript provide type:

// With element
<Badge<'a'>
  component="a"
  onClick={(event) => console.log(event)}
  ref={(node) => {
    window.myRef = node;
  }}
/>


// With component
<Badge<typeof Link>
  component={Link}
  onClick={(event) => console.log(event)}
  ref={(node) => {
    window.myRef = node;
  }}
/>
Go back
Avatar – @mantine/core
Up next
Card – @mantine/core
Build fully functional accessible web applications faster than ever
Project
Contribute to MantineMedia assetsChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGitHub discussions
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter