This is a very long tag name that will be truncated
This is a very long tag name that will be truncated
Another extremely long tag text example
Another extremely long tag text example
실제 사용 예제 (Real World Example)
블로그 포스트 메타데이터 예제
Building Modern Web Applications
Published12 min read
Web DevelopmentJavaScriptReactTutorial
18. 태그/뱃지 시스템
Design a tag and badge component system:
**Badge (status indicators)**:
- Height: 22px, inline-flex
- Padding: 0 8px
- Border-radius: full (pill)
- Font: 12px, font-weight 500
- Dot variant: 6px circle + text
**Color Variants**:
- Gray (default), Red, Yellow, Green, Blue, Purple, Pink
- Each has: background (100), text (700)
- Outline variant: border + transparent bg
**Tag (user-applied labels)**:
- Similar to badge but interactive
- Optional X button to remove
- Hover state for clickable tags
- Focus ring for keyboard
**Input Tag**:
- Multi-value input field
- Type + Enter/comma to create
- Backspace to delete last
- Autocomplete suggestions dropdown
**Size Variants**:
- sm: 18px height, 10px font
- md: 22px height, 12px font (default)
- lg: 28px height, 14px font
**With Icon**:
- Leading icon: 12-14px, color matches text
- 4px gap between icon and text
**Max Width**:
- Text truncate with ellipsis
- Tooltip on hover showing full text
Tech: React + Tailwind + react-tag-input