Badgepolymorphic

Display badge, pill or tag
Import

Usage

Badge
Color
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
import { Badge } from '@mantine/core';
function Demo() {
return (
<Badge>Badge</Badge>
);
}

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
Peach
import { Badge } from '@mantine/core';
function Demo() {
return (
<>
<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: '#ed6ea0', to: '#ec8c69', deg: 35 }}>Peach</Badge>
</>
);
}

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
import { Badge } from '@mantine/core';
function Demo() {
return (
<>
<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';
import { IconX } from '@tabler/icons';
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">
<IconX size={10} />
</ActionIcon>
);
return (
<Group>
<Badge sx={{ paddingLeft: 0 }} size="lg" radius="xl" 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>
);
}

Polymorphic component

Badge is a polymorphic component, you can change root element:

Link badge
$$$ Get lots of money $$$
import { Badge } from '@mantine/core';
const CustomComponent = ({ pads, children, ...others }: { pads: string; children: React.ReactNode; }) => (
<div {...others}>
{pads} {children} {pads}
</div>
);
function Demo() {
return (
<>
<Badge component="a" href="https://mantine.dev" variant="outline">
Link badge
</Badge>
<Badge component={CustomComponent} pads="$$$" variant="filled">
Get lots of money
</Badge>
</>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Badge component props

NameTypeDescription
children
ReactNode
Badge label
color
MantineColor
Key of theme.colors
fullWidth
boolean
Sets badge width to 100% of parent element, hides overflow text with text-overflow: ellipsis
gradient
MantineGradient
Controls gradient, applied to gradient variant only
leftSection
ReactNode
Section rendered on the left side of label
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or number to set border-radius in px
rightSection
ReactNode
Section rendered on the right side of label
size
"xs" | "sm" | "md" | "lg" | "xl"
Badge height and font size
variant
"outline" | "light" | "filled" | "gradient" | "dot"
Controls appearance

Badge component Styles API

NameStatic selectorDescription
root.mantine-Badge-rootRoot element
inner.mantine-Badge-innerBadge label container, contains children
leftSection.mantine-Badge-leftSectionLeft section, controlled by leftSectionProp
rightSection.mantine-Badge-rightSectionRight section, controlled by rightSectionProp