Component

Badge

상태나 짧은 분류를 글자와 색으로 표시합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

표시할 짧은 텍스트

badge의 표현 방식

inverse는 무채색, brand는 브랜드, 나머지는 상태 의미

secondary·outline·ghost를 불투명 표면으로 채웁니다. primary에는 영향이 없습니다.

양 끝이 완전히 둥근 pill · 끄면 기본 md 반경

badge 크기

보조 상태 점

Code

import { Badge } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Badge opaque={false} color={"success"} showDot={false} rounded={false} size={"md"} variant={"secondary"}>
      {"동기화됨"}
    </Badge>))
}

Props

@amineslab/ui에서 Badge를 가져옵니다.

import { Badge } from '@amineslab/ui'

`Badge`

HTML <div> 요소의 표준 속성을 그대로 받습니다.

Name	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost'`	`'primary'`	badge의 표현 방식입니다. Button과 같은 축이며 상호작용이 없어 hover 표현이 없습니다. ghost는 면 없이 색 텍스트만 표시합니다.
`color`	`'inverse' \| 'brand' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'inverse'`	inverse는 무채색, brand는 브랜드, success·warning·danger·info는 상태 의미입니다.
`opaque`	`boolean`	`false`	secondary·outline·ghost 아래를 불투명 표면으로 채웁니다.
`rounded`	`boolean`	`false`	Button과 같이 양 끝이 완전히 둥근 pill 형태로 만듭니다. 기본은 md 반경입니다.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	badge 크기입니다.
`showDot`	`boolean`	`false`	보조 상태 점을 표시합니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Variants

primary

secondary

outline

ghost

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { type BadgeVariant, Badge } from '@amineslab/ui'

const badgeVariants = [
    'primary',
    'secondary',
    'outline',
    'ghost',
] as const satisfies readonly BadgeVariant[];

function ExampleRow({ className, stretch = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    stretch?: boolean;
}) {
    return (<div {...props} className={cn('flex flex-wrap justify-center gap-3', stretch ? 'items-stretch' : 'items-center', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleRow>
          {badgeVariants.map((variant) => (<Badge key={variant} variant={variant}>
              {variant}
            </Badge>))}
        </ExampleRow>))
}

Colors

inverse

brand

success

warning

danger

info

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { type BadgeColor, Badge } from '@amineslab/ui'

const badgeColors = [
    'inverse',
    'brand',
    'success',
    'warning',
    'danger',
    'info',
] as const satisfies readonly BadgeColor[];

function ExampleRow({ className, stretch = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    stretch?: boolean;
}) {
    return (<div {...props} className={cn('flex flex-wrap justify-center gap-3', stretch ? 'items-stretch' : 'items-center', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleRow>
          {badgeColors.map((color) => (<Badge key={color} color={color} variant="secondary">
              {color}
            </Badge>))}
        </ExampleRow>))
}

Rounded

기본

rounded

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { Badge } from '@amineslab/ui'

function ExampleRow({ className, stretch = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    stretch?: boolean;
}) {
    return (<div {...props} className={cn('flex flex-wrap justify-center gap-3', stretch ? 'items-stretch' : 'items-center', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleRow>
          <Badge color="brand" variant="secondary">
            기본
          </Badge>
          <Badge color="brand" rounded variant="secondary">
            rounded
          </Badge>
        </ExampleRow>))
}

With dot

정상

중단

대기

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { Badge } from '@amineslab/ui'

function ExampleRow({ className, stretch = false, ...props }: ComponentPropsWithoutRef<'div'> & {
    stretch?: boolean;
}) {
    return (<div {...props} className={cn('flex flex-wrap justify-center gap-3', stretch ? 'items-stretch' : 'items-center', className)}/>);
}

export default function ExamplePreview() {
  return ((<ExampleRow>
          <Badge color="success" showDot variant="secondary">
            정상
          </Badge>
          <Badge color="danger" showDot variant="secondary">
            중단
          </Badge>
          <Badge color="info" showDot variant="ghost">
            대기
          </Badge>
        </ExampleRow>))
}

사용 기준

권장하는 사용

텍스트만으로도 의미를 이해할 수 있게 작성합니다.

피해야 할 사용

모든 부가 정보를 badge로 만들어 읽기 흐름을 끊지 마세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

이 컴포넌트에는 별도의 키보드 조작이 필요하지 않습니다.