Overview
Tag component displays a label with different severity colors for categorization or status indication.
Import
import { MagaryTag } from 'ng-magary';
Basic Usage
<magary-tag [value]="'New'"></magary-tag>
Severity Levels
<magary-tag
[severity]="'success'"
[value]="'Completed'">
</magary-tag>
With Icons
<magary-tag
[severity]="'success'"
[icon]="'check'"
[value]="'Verified'">
</magary-tag>
<magary-tag
[severity]="'warning'"
[icon]="'alert-triangle'"
[value]="'Warning'">
</magary-tag>
<magary-tag
[severity]="'danger'"
[icon]="'x-circle'"
[value]="'Error'">
</magary-tag>
<magary-tag
[severity]="'info'"
[value]="'Tag'"
[rounded]="true">
</magary-tag>
severity
'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast'
default:"'info'"
Color severity of the tag
Text to display in the tag
Lucide icon name to display
Display tag with rounded corners
Usage Examples
<div class="status-tags">
<magary-tag
[severity]="'success'"
[icon]="'check-circle'"
[value]="'Active'">
</magary-tag>
<magary-tag
[severity]="'danger'"
[icon]="'x-circle'"
[value]="'Inactive'">
</magary-tag>
<magary-tag
[severity]="'warning'"
[icon]="'pause-circle'"
[value]="'Paused'">
</magary-tag>
</div>
Product Categories
<div class="product-tags">
<magary-tag
[severity]="'info'"
[value]="'Electronics'"
[rounded]="true">
</magary-tag>
<magary-tag
[severity]="'secondary'"
[value]="'New Arrival'"
[rounded]="true">
</magary-tag>
<magary-tag
[severity]="'danger'"
[value]="'Sale'"
[rounded]="true">
</magary-tag>
</div>
<div class="tags-container">
<magary-tag
*ngFor="let tag of tags"
[severity]="tag.severity"
[value]="tag.value"
[icon]="tag.icon">
</magary-tag>
</div>
Order Status
getStatusTag(status: string) {
const statusMap: Record<string, any> = {
'completed': { severity: 'success', icon: 'check-circle' },
'processing': { severity: 'info', icon: 'loader' },
'pending': { severity: 'warning', icon: 'clock' },
'cancelled': { severity: 'danger', icon: 'x-circle' }
};
return statusMap[status] || { severity: 'secondary', icon: null };
}
<magary-tag
[severity]="getStatusTag(order.status).severity"
[icon]="getStatusTag(order.status).icon"
[value]="order.status | titlecase">
</magary-tag>
Features
- 6 severity levels: Success, info, warning, danger, secondary, contrast
- Icon support: Display Lucide icons
- Rounded option: Pill-shaped tags
- Compact design: Minimal space usage
- Semantic colors: Intuitive color meanings
- Flexible: Use for any categorization
Accessibility
- Semantic HTML
- Color + text (not color alone)
- Screen reader friendly
- Proper contrast ratios
