Tag

Tag (태그)

콘텐츠를 분류하거나 라벨링하는 데 쓰는 컴포넌트예요. 카테고리나 키워드 같은 짧은 정보를 표시할 때 유용해요.

출처: 문서

본문

Tag는 콘텐츠를 분류하거나 라벨링하기 위한 컴포넌트예요. <ExampleTabs name="tag-basic" />

사용법 (Usage)

import { Tag } from "@chakra-ui/react"

<Tag.Root>
  <Tag.Label>Tag here</Tag.Label>
</Tag.Root>

Info: 닫힌(closed) 컴포넌트 구성을 선호한다면 아래 스니펫을 확인해 보세요.

예시 (Examples)

아이콘 (Icon)

Tag.StartElement과 Tag.EndElement 컴포넌트로 태그의 시작이나 끝에 아이콘을 추가할 수 있어요.

변형 (Variants)

variant prop으로 태그의 외형을 바꿀 수 있어요.

크기 (Sizes)

size prop으로 태그의 크기를 바꿀 수 있어요.

색상 (Colors)

colorPalette prop으로 태그의 색상을 바꿀 수 있어요.

닫기 가능 (Closable)

Tag.EndElement 안에서 Tag.CloseTrigger를 사용하면 태그를 닫을 수 있게 만들 수 있어요.

오버플로 (Overflow)

maxWidth prop으로 태그의 최대 너비를 제어할 수 있어요. 콘텐츠가 이 너비를 넘어가면 말줄임표(...)로 잘려요.

길이가 달라질 수 있는 동적이거나 사용자 생성 콘텐츠를 다룰 때 특히 유용해요.

아바타 (Avatar)

태그 컴포넌트는 Avatar 컴포넌트와 잘 어울리도록 설계됐어요.

Note: 크기를 올바르게 맞추려면 아바타 크기를 full로 설정하세요.

버튼으로 렌더링 (Render as button)

asChild prop으로 태그를 버튼으로 렌더링할 수 있어요.

닫힌 컴포넌트 (Closed Component)

닫힌 컴포넌트 구성을 위해 Tag를 설정하는 방법이에요. 프로젝트에 자동으로 닫힌 컴포넌트를 추가하고 싶다면 다음 명령을 실행해요.

npx @chakra-ui/cli snippet add tag

Props

Tag 컴포넌트의 Root 파트 props에 대한 상세 정보는 공식 문서의 PropTable를 참고하세요.