Badge

A visual indicator for notification counts or status information.

Default Badge

Default

Installation

Copy and paste the following code into your project

import { type HTMLStyledProps, styled } from '@styled-system/jsx'
import { badge } from '@styled-system/recipes'
 
export const Badge = styled('div', badge)
 
export type BadgeProps = HTMLStyledProps<typeof Badge>

Update the import paths to match your project setup

Usage

import { Badge } from '@/components/ui/badge'

<Badge variant="default">Badge</Badge>

Examples

Default

Default Badge

Default

Outline

Primary Badge

Dashed

Error Badge

With Icon

Default

Primary

Error