v6.0.35

Badgepolymorphic

Display badge, pill or tag
Import

Usage

Badge
Color
Shades
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
import { Badge } from '@asuikit/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 '@asuikit/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, Box, Flex } from '@asuikit/core';
function Demo() {
return (
<Flex>
<Box w={200}>
<Badge variant="filled" fullWidth>
Full width badge
</Badge>
</Box>
<Box w={120} ml="md">
<Badge variant="filled" fullWidth>
Badge with overflow
</Badge>
</Box>
</Flex>
);
}

Right and left sections

Avatar for badge
Badge with Avatar
Badge with right section
Badge with left section
import { ActionIcon, Avatar, Badge, Group, rem } from '@asuikit/core';
import { IconX } from '@tabler/icons-react';
const avatar = (
<Avatar
alt="Avatar for badge"
size={24}
mr={5}
src="./avatar.png"
/>
);
const removeButton = (
<ActionIcon size="xs" color="blue" radius="xl" variant="transparent">
<IconX size={rem(10)} />
</ActionIcon>
);
function Demo() {
return (
<Group>
<Badge pl={0} size="lg" color="teal" radius="xl" leftSection={avatar}>
Badge with Avatar
</Badge>
<Badge variant="outline" pr={3} rightSection={removeButton}>
Badge with right section
</Badge>
<Badge variant="outline" pl={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, Group } from '@asuikit/core';
const CustomComponent = ({ pads, children, ...others }: { pads: string; children: React.ReactNode; }) => (
<div {...others}>
{pads} {children} {pads}
</div>
);
function Demo() {
return (
<Group position="center">
<Badge component="a" href="https://mantine.dev" variant="outline">
Link badge
</Badge>
<Badge component={CustomComponent} pads="$$$" variant="filled">
Get lots of money
</Badge>
</Group>
);
}

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 any valid CSS value to set border-radius, "xl" by default
rightSection
ReactNode
Section rendered on the right side of label
size
"xs" | "sm" | "md" | "lg" | "xl"
Badge height and font size
variant
BadgeVariant
Controls appearance

Badge component Styles API

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