Tag 태그

표시와 선택에 사용하는 태그입니다.

기본 사용법

기본 사용법

기본 태그주요 태그성공 태그둥근 태그외곽선 태그수묵중국풍컴포넌트 라이브러리

import { useState } from 'react'
import { LhTag } from '@lh-ui/react'

export default function Demo() {
  const [tags, setTags] = useState(['수묵', '중국풍', '컴포넌트 라이브러리'])

  const handleClose = (tag: string) => {
    setTags((prev) => prev.filter((item) => item !== tag))
  }

  return (
    <>
      <LhTag>기본 태그</LhTag>
      <LhTag type="primary">주요 태그</LhTag>
      <LhTag type="success">성공 태그</LhTag>
      <LhTag type="warning" round>둥근 태그</LhTag>
      <LhTag type="danger" hit>테두리 태그</LhTag>
      {tags.map((tag) => (
        <LhTag key={tag} closable onClose={() => handleClose(tag)}>
          {tag}
        </LhTag>
      ))}
    </>
  )
}

Tag Props

프로퍼티	설명	타입	옵션	기본값
type	유형	'text' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	—	'text'
size	크기	'large' | 'middle' | 'small'	—	ConfigProvider 따름
closable	닫기 허용	boolean	—	false
disabled	비활성화(클릭과 닫기에 반응하지 않음)	boolean	—	false
round	둥근 모서리	boolean	—	false
hit	테두리 형태	boolean	—	false
sx	간편 레이아웃 프로퍼티	SxProps	—	—

Tag 이벤트

이벤트	설명	콜백 시그니처	Vue 대응
onClick	클릭 시 발생(onClick을 전달하고 disabled가 아닐 때, 컴포넌트는 role="button"으로 승격됨)	(event: MouseEvent) => void	@click
onClose	닫기 버튼 클릭	(event: MouseEvent) => void	@close

키보드 인터랙션

클릭 가능한 Tag는 role="button"으로 렌더링되고 Enter / Space에 반응합니다. 자세한 내용은 접근성을 참조하세요.

닫기 즉시 언마운트(React 개선)

닫기 버튼을 클릭하면 Tag가 즉시 DOM에서 언마운트된 뒤 onClose가 발생합니다. lh-ui-plus의 @close는 이벤트만 던지고 노드 제거는 외부 v-if에 맡기지만, React에는 디렉티브가 없어 순수 표시 시나리오에서 외부 state로 언마운트를 제어하는 것은 너무 무거우므로, 이 라이브러리는 닫힘 상태를 내장했습니다. 표시 / 숨김을 완전히 직접 제어하려면 조건부 렌더링으로 감싸면 됩니다.

스타일

import '@lh-ui/react/style/tag'