KRDS React

태그 Tag ​

태그는 키워드 또는 레이블을 사용하여 콘텐츠를 분류하는 수단이다. 콘텐츠 항목에 직접 관련 분류 체계, 데이터 속성을 표시하거나, 목록에서 특정 분류 체계, 데이터 속성을 가진 항목이 선택되었음을 보여주기 위한 태그 그룹으로 사용된다.

KRDS 가이드

기본 ​

tsx
import { Tag } from '@krds.ui/react'

export default function TagDemo() {
  return (
    // TagWrap이 패키지 최상위에서 export되지 않아 같은 마크업(krds-tag-wrap)을 직접 쓴다
    <div className="krds-tag-wrap medium">
      <Tag>주민등록</Tag>
      <Tag>건강보험</Tag>
      <Tag variant="link" href="#tax">
        지방세
      </Tag>
    </div>
  )
}

Tag ​

Props

이름타입기본값설명
variant"link" | "deletable"-태그 타입
onDelete(() => void)-삭제 버튼 클릭 핸들러
deleteDisabledboolean-삭제 버튼 비활성화
children (필수)ReactNode-태그 텍스트
classNamestring-커스텀 클래스명
href (필수)string-링크 URL