tag Component

Tag Class API Reference

Type Class Options Usage Notes
Base tag Required base class Always required
tags Container for multiple tags Wrapper element for tag groups
Style Variants outline Border only, no fill Modifier to tag
basic Minimal styling Light appearance
circular Fully rounded edges Pill shape
square No rounded edges Sharp corners
ribbon Ribbon style tag Can be combined with left or right
pointing Arrow pointing style Use with above, below, left, right
Size tiny Extra small size Optional modifier
small Small size Optional modifier
(default) Medium size No class needed
large Large size Optional modifier
big Extra large size Optional modifier
Color (Semantic) primary Main action color Blue-based
positive Success/confirm Green-based
negative Danger/error Red-based
warning Caution/alert Yellow/orange-based
info Information Blue-based
Color (Extended) red, orange, yellow Warm colors Direct color names
olive, green, teal Green spectrum Direct color names
blue, violet, purple, pink, brown, grey, black Cool & neutral colors Direct color names
Interactive clickable Clickable tag Shows hover effect
checkable Toggle selection Can be checked/unchecked
checked Selected state For checkable tags
animated Animated transitions Smooth state changes
Special connected Connected group Apply to container
tag-input Tag input field Dynamic tag creation
close Close button Removable tag element

Combination Examples

tag small primary - Small primary tag
tag outline negative - Negative outline tag
tag circular positive - Circular positive tag
tag clickable checkable - Interactive selectable tag
tags tiny primary connected - Connected tiny primary tags

Basic Tags

Default Tags

Default Tag Another Tag Third Tag

Size Variations

Tiny Small Default Large Big

Tag Colors

Semantic Colors

Primary Positive Negative Warning Info

Extended Color Palette

Red Orange Yellow Olive Green Teal
Blue Violet Purple Pink Brown Grey Black

Style Variations

Outline Style

Default Outline Primary Outline Positive Outline Negative Outline Warning Outline Info Outline

Basic Style (Minimal)

Basic Tag Primary Basic Positive Basic Negative Basic

Shape Variations

Default Circular Square

Interactive Tags

Closable Tags

Removable Delete Me Remove

Clickable Tags

Click Me Interactive Hover Effect Action Tag

Checkable Tags (Toggle Selection)

JavaScript Python React Vue Angular

Tags with Icons & Avatars

Tags with Icons

Featured Verified Delete Warning Information

Tags with Avatars

User John Doe User Jane Smith User Mike Johnson

Special Tag Styles

Ribbon Style

Left Ribbon Right Ribbon Sale New

Pointing Tags

Points Above Points Below Points Left Points Right

Connected Tags

First Second Third
Connected Group Tags

Tag Input Field

Dynamic Tag Creation

Type and press Enter or comma to create tags. Use Backspace to remove.

Sample Tags
Blue Theme

Container Inheritance

Size Inheritance

All Are Tiny
All Are Small
All Are Large
All Are Big

Color Inheritance

All Primary Tags
All Positive Tags
All Negative Tags

Combined Size & Color Inheritance

Tiny Primary Tags
Small Positive Tags
Large Negative Tags
Big Warning Tags

Individual Overrides

Default Override Color Override Size Override Both Default

Common Use Cases

Category Tags

Technology Design Marketing Business Development

Status Indicators

Active Pending Expired Draft Archived

Applied Filters

Price: $100-$500 Brand: Apple In Stock

User Tags

Admin Admin Editor Editor Viewer Viewer Guest Guest

Skills & Technologies

Frontend
HTML5 CSS3 JavaScript React Vue.js Angular
Backend
Node.js Python Java PHP Ruby Go
Databases
MySQL PostgreSQL MongoDB Redis Firebase

JavaScript API

TagManager Methods

// Add a tag programmatically
TagManager.add('#my-container', 'New Tag', {
    color: 'primary',
    size: 'small',
    closable: true,
    clickable: true
});

// Remove a tag
TagManager.remove('.tag:first-child');

// Clear all tags
TagManager.clear('#my-container');

// Get all tag values
const values = TagManager.getValues('#my-container');

// Check if tag exists
const exists = TagManager.exists('#my-container', 'JavaScript');

// Listen to events
document.addEventListener('tag:created', (e) => {
    console.log('Tag created:', e.detail.text);
});

document.addEventListener('tag:removed', (e) => {
    console.log('Tag removed:', e.detail.text);
});

document.addEventListener('tag:clicked', (e) => {
    console.log('Tag clicked:', e.detail.text);
});

document.addEventListener('tag:toggled', (e) => {
    console.log('Tag toggled:', e.detail.text, e.detail.checked);
});

Tag Input Configuration

// Initialize tag input with options
const tagInput = new TagInput('.tag-input', {
    unique: true,              // Prevent duplicates
    maxTags: 10,              // Maximum number of tags
    minLength: 2,             // Minimum character length
    maxLength: 20,            // Maximum character length
    separators: [',', 'Enter'], // Keys that create tags
    placeholder: 'Add tag...',
    onAdd: (tag) => console.log('Added:', tag),
    onRemove: (tag) => console.log('Removed:', tag)
});

Usage Guidelines

  • • Tags are inline-flex elements that automatically wrap in their container
  • • Use .tags container for proper spacing between tags
  • • Container-level sizing and colors reduce repetitive class declarations
  • • Combine multiple modifiers for complex tag styles
  • • Interactive tags (clickable, checkable) require JavaScript for full functionality
  • • Close buttons in tags automatically handle removal with smooth animations