Badges
Badges show notifications, counts, or status information on navigation items and icons
Usage
Badges are used to indicate a notification, item count, or other information relating to a navigation destination. They are placed on the ending edge of icons, typically within other components.
Instalation
Copy and paste the following code into your project.
import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
const badgeVariants = cva(
'absolute flex items-center bg-error justify-center rounded-2xl text-label-sm text-onError transition-transform outline-none',
{
variants: {
size: {
small: 'h-1.5 w-1.5 top-0',
large: 'h-4 min-w-[16px] px-1 bottom-1/2',
},
align: {
left: '',
right: '',
},
},
compoundVariants: [
{
size: 'small',
align: 'right',
className: 'right-0',
},
{
size: 'small',
align: 'left',
className: 'left-0',
},
{
size: 'large',
align: 'right',
className: 'left-1/2',
},
{
size: 'large',
align: 'left',
className: 'right-1/2',
},
],
defaultVariants: {
size: 'small',
align: 'right',
},
}
)
export interface BadgeProps
extends React.HTMLAttributes<HTMLSpanElement>,
VariantProps<typeof badgeVariants> {
content?: string
align?: 'left' | 'right'
}
function Badge({
className,
size,
align,
children,
content,
...props
}: BadgeProps) {
return (
<div className="relative inline-flex h-fit w-fit items-center">
{children}
<span
className={cn(badgeVariants({ size, align }), className)}
{...props}
>
{content}
</span>
</div>
)
}
export { Badge, badgeVariants }
Update the import paths to match your project setup.
Examples
Small
A small badge is a simple circle, used to indicate an unread notification.
house
import { Badge } from '@/components/ui/badge'
import { Icon } from '@/components/ui/icon'
export const SmallBadge = () => {
return (
<Badge>
<Icon symbol="house" />
</Badge>
)
}
Large
A large badge contains label text communicating item count information.
notifications3
notifications999+
import { Badge } from '@/components/ui/badge'
import { Icon } from '@/components/ui/icon'
export const LargeBadge = () => {
return (
<div className="flex gap-6">
<Badge size="large" content="3">
<Icon symbol="notifications" />
</Badge>
<Badge size="large" content="999+">
<Icon symbol="notifications" />
</Badge>
</div>
)
}