KRDS Vue

배지 Badge ​

컴포넌트에 대한 빠른 인지와 탐색을 돕기 위해 컴포넌트 근처에 표시되는 작은 문자 또는 숫자 데이터이다. 컴포넌트의 분류 체계, 구조화된 정보, 상태 정보, 기타 메타 데이터를 표시할 수 있으며 사용자의 주의를 끌기 위해 색상을 활용할 수 있다.

KRDS 가이드

기본 ​

속성을 지정하지 않으면 type="outline", color="primary", size="large"로 표시됩니다.

label
vue
<script setup lang="ts">
  import { KrdsBadge } from '@krds.ui/vue'
</script>

<template>
  <KrdsBadge>label</KrdsBadge>
</template>

기본 전체 ​

type(outline, bg, bg-light)과 color의 조합입니다. 행마다 size를 large, medium, small로 달리했습니다.

labellabellabellabellabellabellabellabel
labellabellabellabellabellabellabellabel
labellabellabellabellabellabellabellabel
vue
<script setup lang="ts">
  import { KrdsBadge } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 1rem">
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center">
      <KrdsBadge type="outline" color="primary" size="large">label</KrdsBadge>
      <KrdsBadge type="outline" color="secondary" size="large">label</KrdsBadge>
      <KrdsBadge type="outline" color="gray" size="large">label</KrdsBadge>
      <KrdsBadge type="outline" color="point" size="large">label</KrdsBadge>
      <KrdsBadge type="outline" color="danger" size="large">label</KrdsBadge>
      <KrdsBadge type="outline" color="warning" size="large">label</KrdsBadge>
      <KrdsBadge type="outline" color="success" size="large">label</KrdsBadge>
      <KrdsBadge type="outline" color="information" size="large">label</KrdsBadge>
    </div>
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center">
      <KrdsBadge type="bg" color="primary" size="medium">label</KrdsBadge>
      <KrdsBadge type="bg" color="secondary" size="medium">label</KrdsBadge>
      <KrdsBadge type="bg" color="gray" size="medium">label</KrdsBadge>
      <KrdsBadge type="bg" color="point" size="medium">label</KrdsBadge>
      <KrdsBadge type="bg" color="danger" size="medium">label</KrdsBadge>
      <KrdsBadge type="bg" color="warning" size="medium">label</KrdsBadge>
      <KrdsBadge type="bg" color="success" size="medium">label</KrdsBadge>
      <KrdsBadge type="bg" color="information" size="medium">label</KrdsBadge>
    </div>
    <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center">
      <KrdsBadge type="bg-light" color="primary" size="small">label</KrdsBadge>
      <KrdsBadge type="bg-light" color="secondary" size="small">label</KrdsBadge>
      <KrdsBadge type="bg-light" color="gray" size="small">label</KrdsBadge>
      <KrdsBadge type="bg-light" color="point" size="small">label</KrdsBadge>
      <KrdsBadge type="bg-light" color="danger" size="small">label</KrdsBadge>
      <KrdsBadge type="bg-light" color="warning" size="small">label</KrdsBadge>
      <KrdsBadge type="bg-light" color="success" size="small">label</KrdsBadge>
      <KrdsBadge type="bg-light" color="information" size="small">label</KrdsBadge>
    </div>
  </div>
</template>

넘버 배지 ​

12341234
vue
<script setup lang="ts">
  import { KrdsBadge } from '@krds.ui/vue'
</script>

<template>
  <div style="display: flex; flex-wrap: wrap; gap: 1rem; align-items: center">
    <KrdsBadge type="bg" color="primary" number>1234</KrdsBadge>
    <KrdsBadge type="bg" color="point" number>1234</KrdsBadge>
  </div>
</template>

KrdsBadge ​

Props

이름타입기본값설명
numberbooleanfalse넘버 여부
classKrdsClassValue-CSS 클래스
type"outline" | "bg" | "bg-light"'outline'배지 타입
colorColorVariant'primary'배지 컬러
sizeSize'large'배지 크기

Events

이름인자설명
click[event: MouseEvent]배지를 클릭했을 때

Slots

이름설명
default배지 글자