Badge
A small count and labeling component used to highlight an status.
Usage
Park UI
solid
subtle
outline
import { Badge, type BadgeProps } from '~/components/ui'
export const Demo = (props: BadgeProps) => {
return <Badge {...props}>Park UI</Badge>
}
Installation
npx @park-ui/cli components add badge1
Styled Primitive
Copy the code snippet below into ~/components/ui/primitives/badge.tsx
import { ark } from '@ark-ui/react/factory'
import { styled } from 'styled-system/jsx'
import { badge } from 'styled-system/recipes'
import type { ComponentProps } from 'styled-system/types'
export type BadgeProps = ComponentProps<typeof Badge>
export const Badge = styled(ark.div, badge)
import { ark } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { styled } from 'styled-system/jsx'
import { badge } from 'styled-system/recipes'
export type BadgeProps = ComponentProps<typeof Badge>
export const Badge = styled(ark.div, badge)
No snippet foundExtend ~/components/ui/primitives/index.ts with the following line:
export { Badge, type BadgeProps } from './badge'2
Integrate Recipe
If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:
import { defineRecipe } from '@pandacss/dev'
export const badge = defineRecipe({
className: 'badge',
base: {
alignItems: 'center',
borderRadius: 'full',
colorPalette: 'accent',
display: 'inline-flex',
fontWeight: 'medium',
userSelect: 'none',
whiteSpace: 'nowrap',
},
defaultVariants: {
variant: 'subtle',
size: 'md',
},
variants: {
variant: {
solid: {
background: 'colorPalette.default',
color: 'colorPalette.fg',
},
subtle: {
background: 'bg.subtle',
borderColor: 'border.subtle',
borderWidth: '1px',
color: 'fg.default',
'& svg': {
color: 'fg.muted',
},
},
outline: {
color: 'fg.default',
borderWidth: '2px',
borderColor: 'border.default',
},
},
size: {
sm: {
textStyle: 'xs',
px: '2',
h: '5',
gap: '1',
'& svg': {
width: '3',
height: '3',
},
},
md: {
textStyle: 'xs',
px: '2.5',
h: '6',
gap: '1.5',
'& svg': {
width: '4',
height: '4',
},
},
lg: {
textStyle: 'sm',
px: '3',
h: '7',
gap: '1.5',
'& svg': {
width: '4',
height: '4',
},
},
},
},
})