About This Component
The Tags Component is a flexible UI element designed to display statuses and actions in a clear, visual way. It supports different colors, icons, and styles, making it easy to reuse across dashboards, tables, or workflows.
The component is built as a simple React function with a prop-driven API, so each tag can be customized without duplicating styles.
Color System
To keep the tags consistent and soft on the eyes, I defined a pastel color system for background, text, and solid states:
const pastelBg = {
Success: '#E3F8E0',
Danger: '#FDE8E8',
Warning: '#FFF6DA',
Teal: '#E0F7F4',
Info: '#E3F0FF',
Default: '#F3F4F6',
Purple: '#F3E8FF',
};
const pastelText = {
Success: '#166534',
Danger: '#991B1B',
Warning: '#92400E',
Teal: '#115E59',
Info: '#1E40AF',
Default: '#374151',
Purple: '#6B21A8',
};
const solidBg = {
Success: '#22C55E',
Danger: '#EF4444',
Warning: '#F59E0B',
Purple: '#A855F7',
};
This separation makes it easy to switch between light and solid variants while keeping colors predictable and visually harmonious across different use cases.
Component Props
The tag behavior and appearance are controlled through props:
type ColorKey = 'Success' | 'Danger' | 'Warning' | 'Teal' |
'Info' | 'Default' | 'Purple';
type Props = {
content: string;
isFilled: boolean;
isBordered: boolean;
leadingIcon: React.ReactNode;
trailingIcon: React.ReactNode;
color: ColorKey;
colorType?: 'light' | 'solid';
type?: 'default';
};
This allows each tag to handle:
- Text content
- Optional leading and trailing icons
- Filled or outlined styles
- Light or solid color modes
Dynamic Styling Logic
The background and text color are computed at runtime based on the selected color and style:
const TagsComponent = (props: Props) => {
const {
content,
isFilled,
isBordered,
trailingIcon,
leadingIcon,
color,
colorType = 'light'
} = props;
const baseClasses = 'inline-flex items-center gap-1.5 px-3 py-2 font-medium rounded-lg text-sm transition-all duration-150 ease-out hover:shadow-md active:scale-[0.98] cursor-default select-none';
let backgroundColor = 'transparent';
let textColor = pastelText[color] || pastelText.Default;
let boxShadow = 'none';
if (isFilled) {
if (colorType === 'light') {
backgroundColor = pastelBg[color] || pastelBg.Default;
boxShadow = '0 1px 2px 0 rgba(0, 0, 0, 0.05)';
} else {
backgroundColor = pastelSolid[color] || pastelSolid.Default;
textColor = 'white';
boxShadow = '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)';
}
}
const borderColor = isBordered ? (pastelText[color] || pastelText.Default) : 'transparent';
const tagStyle = {
backgroundColor,
color: textColor,
border: isBordered ? 1.5px dashed borderColor : 'none',
boxShadow: boxShadow,
};
return (
<div className={baseClasses} style={tagStyle}>
{leadingIcon && (
<span className="w-4 h-4 flex items-center justify-center shrink-0" style={{ strokeWidth: 2.5 }}>
{leadingIcon}
</span>
)}
<span className="font-medium whitespace-nowrap">{content}</span>
{trailingIcon && (
<span className="w-4 h-4 flex items-center justify-center shrink-0" style={{ strokeWidth: 2.5 }}>
{trailingIcon}
</span>
)}
</div>
);
};
For solid tags, the text automatically switches to white to maintain contrast, ensuring readability across all color variants.
Icon Support
Icons are fully optional and slot-based, so any icon library can be used. The component uses Lucide React icons but can work with any React icon library:
// Status indicator with icon
<TagsComponent
content="Verified"
isFilled={true}
isBordered={false}
leadingIcon={<Check />}
trailingIcon={null}
color="Success"
colorType="light"
/>
// Action tag with solid background
<TagsComponent
content="Upload"
isFilled={true}
isBordered={false}
leadingIcon={<Upload />}
trailingIcon={null}
color="Purple"
colorType="solid"
/>
// Simple text-only tag
<TagsComponent
content="Booking"
isFilled={true}
isBordered={false}
leadingIcon={null}
trailingIcon={null}
color="Info"
colorType="light"
/>
This makes the component suitable for both status indicators (Verified, Rejected) and actions (Upload, Download), providing maximum flexibility for different use cases.
Key Features
- Seven color variants with both light and solid modes
- Optional leading and trailing icon slots
- Automatic contrast handling for solid backgrounds
- Consistent pastel color palette for visual harmony
- Fully prop-driven API for easy customization
- Works with any React icon library
Inspiration
The inspiration came from modern admin dashboards and design systems where tags need to be expressive but not distracting. The goal was to keep the component lightweight, readable, and easy to extend while supporting a wide range of use cases—from status badges in data tables to action buttons in workflows.
Here's the source code, I hope you like it :)
prash240303/crafts/TagsComponent