TagList
A component that renders a collection of tags as Chip components in a flexible, wrapping row. Supports both simple string tags and complex tag objects with icons and variants.
Simple String Tags
Health
Travel
Prevention
Mosquito Control
Tags with Icons
Health Alerts
Map View
User Profile
Settings
Mixed Tags (Strings and Objects)
Zika Virus
Prevention
Travel Advisory
Risk Areas
Health Tips
With Variants
Primary Tag
Secondary Tag
Default Tag
Real-World Examples
Article: Zika Prevention Tips
Learn about effective ways to protect yourself from Zika virus transmission.
Prevention
Health
Mosquito Control
Travel Safety
Risk Areas
Puerto Rico
Florida Keys
South Texas
Usage Example
Health
Travel
Prevention
Health
Map
Important
Info
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tags | array | [] | Array of strings or objects with label/icon/variant |
| class | string | '' | Additional CSS classes |
Tag Object Format
| Property | Type | Required | Description |
|---|---|---|---|
| label | string | Yes | Tag text (or use 'name') |
| icon | string|null | No | Optional icon name |
| variant | string | No | Chip variant (primary, secondary, ghost) |
| selected | boolean | No | Selected state |
Key Features
Flexible Input
Accepts both simple strings and complex tag objects
Responsive Wrapping
Tags automatically wrap to multiple lines as needed
Built on Chip
Leverages all Chip component features and styling
Empty State Handling
Gracefully handles empty tag arrays