태그

태그는 키워드 또는 레이블을 사용하여 콘텐츠를 분류하는 수단이다.

태그는 키워드 또는 레이블을 사용하여 콘텐츠를 분류하는 수단이다.

사용 지침

검색 결과 필터·작성한 키워드 표시처럼 다중 분류를 시각화할 때 사용하고, 닫기(X) 버튼을 둘 경우 키보드 포커스와 aria-label로 제거 동작을 명확히 안내합니다.

예제

Default

일반공지안내업데이트긴급
examples/tag/TagDefault.tsx
import { Tag } from "@/components/ui/dynamic/tag"

export default function TagDefault() {

Deletable

서울경기부산대전광주
examples/tag/TagDeletable.tsx
"use client"

import * as React from "react"
examples/tag/TagLink.tsx
import { Tag } from "@/components/ui/dynamic/tag"

export default function TagLink() {
examples/tag/TagLinkTag.tsx
import { Tag } from "@/components/ui/dynamic/tag"

export default function TagLinkTag() {

Delete Disabled

서울경기부산
examples/tag/TagDeleteDisabled.tsx
"use client"

import { Tag, TagDelete } from "@/components/ui/dynamic/tag"

속성

이름타입기본값설명
aria-labelstring—Defines a string value that labels the current element. @see aria-labelledby.
asChildboolean——
classNamestring——
idstring——
interactiveboolean | null——
onClickMouseEventHandler<HTMLSpanElement> | MouseEventHandler<HTMLAnchorElement>——
size"xs" | "default" | "lg" | "small" | "medium" | "large" | null——
styleCSSProperties——
tabIndexnumber——
typestring——
variantenum——