Tag
표시와 분류를 위한 태그 컴포넌트입니다.
import { Tag } from 'sud-ui';사용할 때
속성별로 태그를 지정할 때 사용합니다.
분류할 때 사용합니다.
사용예제
default
Basic Usage
기본적인 사용 방법입니다.
blue / gold
volcano / forest
Custom Color
태그 색상을 직접 지정합니다.
closeable
Closeable
태그 닫기 버튼을 표시합니다.
Shape Tag
Shape
태그 모양을 지정합니다.
Size Tag
Size
태그 크기를 지정합니다.
sky
blue
forest
gold
red
Color Type
태그 색상 타입을 지정합니다.
dashed
dotted
Custom Border Style
태그 테두리 스타일을 직접 지정합니다.
My Illustrator Skill Lv.5
My Photoshop Skill Lv.4
With Icon
태그 아이콘을 표시합니다.
Shadow Tag
Shadow
태그 그림자를 지정합니다.
사용 방법
컴포넌트의 props를 설정하는 방법입니다.
| children | 태그 내용 | ReactNode | - |
| colorType | 태그 색상 타입 | default | red | rose | coral | orange | volcano | apricot | yellow | gold | amber | green | lime | mint | blue | sky | cerulean | indigo | cobalt | navy | purple | plum | orchid | forest | sage | warm-gray | cool-gray | neutral | default |
| background | 태그 배경색(palette값 또는 HEX code) | string | - |
| color | 태그 텍스트 색상(palette값 또는 HEX code) | string | - |
| borderColor | 태그 테두리 색상(palette값 또는 HEX code) | string | - |
| borderType | 태그 테두리 스타일 | solid | dashed | dotted | double | groove | ridge | inset | outset | none | solid |
| borderWeight | 태그 테두리 두께 | string | number | 1 |
| className | 추가 클래스명 | string | - |
| closeable | 닫기 버튼 표시 여부 | boolean | false |
| onClose | 닫기 버튼 클릭 시 호출되는 콜백 | () => void | - |
| icon | 태그 아이콘 | ReactNode | - |
| iconPosition | 아이콘 위치 | left | right | - |
| shape | 태그 모양 | square | circle | rounded | capsule | rounded |
| shadow | 태그 그림자 | none | sm | md | lg | none |
| border | 태그 테두리 표시 여부 | boolean | true |
| size | 태그 크기 | sm | md | lg | sm |
| style | 추가 스타일 | CSSProperties | {} |