Tag
태그 컴포넌트는 정보를 분류하고 필터링하기 위한 시각적 표시를 제공합니다. 레이블, 카테고리, 필터 등을 나타내는 데 사용되며, 아이콘, 체크박스, 닫기 버튼 등의 기능을 포함할 수 있습니다.
인터랙티브 예제
Tag10
sizeselect
태그의 크기를 선택합니다.
iconpreset
태그의 아이콘을 선택합니다.
textstring
태그의 텍스트를 입력합니다.
countstring
태그의 카운트를 입력합니다.
closeboolean
태그의 닫기 버튼을 표시합니다.
기본 사용법
import { Tag } from '@ncds/ui-admin';
function App() {
return <Tag text="태그" />;
}
태그
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'sm' | 태그의 크기 |
| color | 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled' | 'neutral' | 태그의 색상 |
| type | 'outline' | 'filled' | 'outline' | 태그의 스타일 타입 |
| onRemove | () => void | - | 삭제 버튼 클릭 시 호출되는 함수 |
상세 예제 (Detailed Examples)
크기 (Size)
Small 태그Medium 태그
아이콘 (Icon)
정보 태그확인 태그닷 태그
카운트 (Count)
상품15할인3신규7
닫기 버튼 (Close Button)
삭제 가능 태그닫기 가능 태그
복합 사용 예제 (Combined Examples)
정보 태그5중요 태그