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

Preview Code
Copy
Default Tag Another Tag Third Tag

Size Variations

Preview Code
Copy
Tiny Small Default Large Big

Tag Colors

Semantic Colors

Preview Code
Copy
Primary Positive Negative Warning Info

Extended Color Palette

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

Style Variations

Outline Style

Preview Code
Copy
Default Outline Primary Outline Positive Outline Negative Outline Warning Outline Info Outline

Basic Style (Minimal)

Preview Code
Copy
Basic Tag Primary Basic Positive Basic Negative Basic

Shape Variations

Preview Code
Copy
Default Circular Square

Interactive Tags

Closable Tags

Preview Code
Copy
Removable Delete Me Remove

Clickable Tags

Preview Code
Copy
Click Me Interactive Hover Effect Action Tag

Checkable Tags (Toggle Selection)

Preview Code
Copy
JavaScript Python React Vue Angular

Tags with Icons & Avatars

Tags with Icons

Preview Code
Copy
Featured Verified Delete Warning Information

Tags with Avatars

Preview Code
Copy
User John Doe User Jane Smith User Mike Johnson

Special Tag Styles

Ribbon Style

Preview Code
Copy
Left Ribbon Right Ribbon Sale New

Pointing Tags

Preview Code
Copy
Points Above Points Below Points Left Points Right

Connected Tags

Preview Code
Copy
First Second Third
Connected Group Tags

Tag Input Field

Dynamic Tag Creation

Preview Code
Copy

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

Sample Tags
Blue Theme

Container Inheritance

Size Inheritance

Preview Code
Copy
All Are Tiny
All Are Small
All Are Large
All Are Big

Color Inheritance

Preview Code
Copy
All Primary Tags
All Positive Tags
All Negative Tags

Combined Size & Color Inheritance

Preview Code
Copy
Tiny Primary Tags
Small Positive Tags
Large Negative Tags
Big Warning Tags

Individual Overrides

Preview Code
Copy
Default Override Color Override Size Override Both Default

Common Use Cases

Category Tags

Preview Code
Copy
Technology Design Marketing Business Development

Status Indicators

Preview Code
Copy
Active Pending Expired Draft Archived

Applied Filters

Preview Code
Copy
Price: $100-$500 Brand: Apple In Stock

User Tags

Preview Code
Copy
Admin Admin Editor Editor Viewer Viewer Guest Guest

Skills & Technologies

Preview Code
Copy
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

Preview Code
Copy 
// 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

Preview Code
Copy 
// 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