Component
Badge
Badge
Displays a badge or a component that looks like a badge.
Badge
Installation
Copy and paste the following code into your project
components/ui/badge/index.tsx
import { styled, type HTMLStyledProps } from '@shadow-panda/styled-system/jsx'
import { badge } from '@shadow-panda/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="outline">Badge</Badge>Recipe
Usage
You can use the badge recipe to apply the badge styles to any component.
import { badge, type BadgeVariantProps } from '@shadow-panda/styled-system/recipes'<span className={badge({ variant: 'outline' })}>Badge</span>Link
You can use the badge recipe to create a link that looks like a badge.
import { badge } from '@shadow-panda/styled-system/recipes'<Link className={badge({ variant: 'outline' })}>Click here</Link>Examples
Default (Primary)
Badge
Secondary
Badge
Destructive
Badge
Outline
Badge
With Icon
Verified