Badge
Badges are small indicators mainly used to display numeric values, such as counts or notifications.
Storybook
Source
Usage
Start by importing the Badge component.
import { Badge } from '@vibrant-ui/components';Then use it in your JSX.
<Badge>9</Badge>9
import { Badge, type BadgeProps } from '@vibrant-ui/components';
export function BadgeExample(props: BadgeProps) {
return <Badge {...props}>9</Badge>;
}Styling
Variants
Badges come in four variants: soft, muted and solid. The default is soft.
9
9
9
import { Badge, badgeVariants, HStack } from '@vibrant-ui/components';
export function BadgeVariantsExample() {
return (
<HStack align="center" gap="sm">
{badgeVariants.map((variant) => (
<Badge key={variant} variant={variant}>
9
</Badge>
))}
</HStack>
);
}Colors
The color prop sets the badge color. It supports all tokens and defaults to neutral.
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
9
import { Badge, badgeVariants, HStack, VStack } from '@vibrant-ui/components';
import { colors } from '@vibrant-ui/styles';
export function BadgeColorsExample() {
return (
<VStack gap="sm">
{badgeVariants.map((variant) => (
<HStack key={variant} gap="sm">
{colors.map((color) => (
<Badge key={color} color={color} variant={variant}>
9
</Badge>
))}
</HStack>
))}
</VStack>
);
}Sizes
The size option controls overall dimensions.
9
9
9
9
9
9
9
9
9
9
9
9
import { Badge, badgeSizes, badgeVariants, HStack, VStack } from '@vibrant-ui/components';
export function BadgeSizesExample() {
return (
<VStack gap="sm">
{badgeVariants.map((variant) => (
<HStack key={variant} gap="sm" align="center">
{badgeSizes.map((size) => (
<Badge key={size} size={size} variant={variant}>
9
</Badge>
))}
</HStack>
))}
</VStack>
);
}Shadows
Use the shadow prop to add subtle elevation.
9
9
9
9
9
9
9
9
9
9
9
9
import { Badge, badgeVariants, HStack, VStack } from '@vibrant-ui/components';
import { type ShadowToken, tokens } from '@vibrant-ui/tokens';
export function BadgeShadowsExample() {
return (
<VStack gap="sm">
{badgeVariants.map((variant) => (
<HStack key={variant} gap="sm">
{(Object.keys(tokens.shadows) as ShadowToken[]).map((shadow) => (
<Badge key={shadow} shadow={shadow} variant={variant}>
9
</Badge>
))}
</HStack>
))}
</VStack>
);
}Growable badge
Allow the badge to expand to fit longer content without layout shifts.
999+
999+
999+
import { Badge, badgeVariants, HStack } from '@vibrant-ui/components';
export function GrowableBadgeExample() {
return (
<HStack align="center" gap="sm">
{badgeVariants.map((variant) => (
<Badge key={variant} color="red" growable variant={variant}>
999+
</Badge>
))}
</HStack>
);
}Props
Prop
Type