Badge

Badge는 객체의 속성이나 상태를 시각적으로 표현하는 작은 텍스트 라벨입니다. 사용자의 주의를 끌고 콘텐츠의 빠른 인지와 탐색을 돕기 위해 사용됩니다.

라벨

import { Badge } from "@seed-design/react";

export default function BadgePreview() {
  return <Badge>라벨</Badge>;
}

Usage

import { Badge } from "@seed-design/react";

<Badge>Badge</Badge>

Props

Prop	Type	Default
`asChild?`	`boolean`	`false`
`tone?`	`"neutral" \| "brand" \| "informative" \| "positive" \| "critical"`	`neutral`
`variant?`	`"weak" \| "solid" \| "outline"`	`solid`
`size?`	`"medium" \| "large"`	`medium`

Examples

Medium

라벨

import { Badge } from "@seed-design/react";

export default function BadgeMedium() {
  return <Badge size="medium">라벨</Badge>;
}

Large

라벨

import { Badge } from "@seed-design/react";

export default function BadgeLarge() {
  return <Badge size="large">라벨</Badge>;
}

Weak

라벨

import { Badge } from "@seed-design/react";

export default function BadgeWeak() {
  return <Badge variant="weak">라벨</Badge>;
}

Solid

라벨

import { Badge } from "@seed-design/react";

export default function BadgeSolid() {
  return <Badge variant="solid">라벨</Badge>;
}

Outline

라벨

import { Badge } from "@seed-design/react";

export default function BadgeOutline() {
  return <Badge variant="outline">라벨</Badge>;
}

Neutral

라벨

import { Badge } from "@seed-design/react";

export default function BadgeNeutral() {
  return <Badge tone="neutral">라벨</Badge>;
}

Brand

라벨

import { Badge } from "@seed-design/react";

export default function BadgeBrand() {
  return <Badge tone="brand">라벨</Badge>;
}

Informative

라벨

import { Badge } from "@seed-design/react";

export default function BadgeInformative() {
  return <Badge tone="informative">라벨</Badge>;
}

Positive

라벨

import { Badge } from "@seed-design/react";

export default function BadgePositive() {
  return <Badge tone="positive">라벨</Badge>;
}

Critical

라벨

import { Badge } from "@seed-design/react";

export default function BadgeCritical() {
  return <Badge tone="critical">라벨</Badge>;
}

asChild

링크

import { Badge } from "@seed-design/react";

export default function BadgeAsChild() {
  return (
    <Badge asChild>
      <a href="https://example.com" target="_blank" rel="noreferrer">
        링크
      </a>
    </Badge>
  );
}

Badge

On this page