Bulma Tag

Bulma Tags are versatile components used for labels, badges, and status indicators. They're perfect for categorizing content, displaying statuses, or creating pill-shaped elements for filters and keywords.

Basic Tag

Simple tag with default styling:

<span class="tag">Default</span>

Tag Colors

Apply different color modifiers:

<!-- Primary -->
<span class="tag is-primary">Primary</span>

<!-- Success -->
<span class="tag is-success">Success</span>

<!-- Warning -->
<span class="tag is-warning">Warning</span>

<!-- Danger -->
<span class="tag is-danger">Danger</span>

<!-- Info -->
<span class="tag is-info">Info</span>

<!-- Light -->
<span class="tag is-light">Light</span>

<!-- Dark -->
<span class="tag is-dark">Dark</span>

<!-- White -->
<span class="tag is-white">White</span>

<!-- Black -->
<span class="tag is-black">Black</span>

Tag Sizes

<!-- Small -->
<span class="tag is-small">Small</span>

<!-- Normal (default) -->
<span class="tag">Normal</span>

<!-- Medium -->
<span class="tag is-medium">Medium</span>

<!-- Large -->
<span class="tag is-large">Large</span>

Rounded Tags

<span class="tag is-rounded">Rounded</span>

<!-- Rounded with color -->
<span class="tag is-primary is-rounded">Primary Rounded</span>

<!-- Different sizes -->
<span class="tag is-small is-rounded">Small Rounded</span>
<span class="tag is-large is-rounded">Large Rounded</span>

Tags with Icons

<!-- Icon on left -->
<span class="tag is-primary">
  <span class="icon is-small">
    <i class="fas fa-check"></i>
  </span>
  <span>Approved</span>
</span>

<!-- Icon on right -->
<span class="tag is-info">
  <span>Notifications</span>
  <span class="icon is-small">
    <i class="fas fa-bell"></i>
  </span>
</span>

<!-- Icon only -->
<span class="tag is-warning">
  <span class="icon is-small">
    <i class="fas fa-exclamation"></i>
  </span>
</span>

<!-- Multiple icons -->
<span class="tag is-success">
  <span class="icon is-small">
    <i class="fas fa-star"></i>
  </span>
  <span>Featured</span>
  <span class="icon is-small">
    <i class="fas fa-crown"></i>
  </span>
</span>

Deletable Tags

Add delete button to make tags removable:

<!-- Basic deletable tag -->
<span class="tag is-primary">
  JavaScript
  <button class="delete is-small"></button>
</span>

<!-- Rounded deletable -->
<span class="tag is-success is-rounded">
  Completed
  <button class="delete is-small"></button>
</span>

<!-- With icon and delete -->
<span class="tag is-info">
  <span class="icon is-small">
    <i class="fas fa-tag"></i>
  </span>
  <span>Label</span>
  <button class="delete is-small"></button>
</span>

<!-- Delete on left -->
<span class="tag is-warning">
  <button class="delete is-small"></button>
  Warning
</span>

Tag Groups

Group multiple tags together:

<!-- Basic tag group -->
<div class="tags">
  <span class="tag">HTML</span>
  <span class="tag">CSS</span>
  <span class="tag">JavaScript</span>
  <span class="tag">React</span>
</div>

<!-- Tag group with addons -->
<div class="tags has-addons">
  <span class="tag is-dark">npm</span>
  <span class="tag is-info">v7.0.0</span>
</div>

<!-- Multiple addon groups -->
<div class="field is-grouped is-grouped-multiline">
  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">License</span>
      <span class="tag is-success">MIT</span>
    </div>
  </div>
  <div class="control">
    <div class="tags has-addons">
      <span class="tag is-dark">Downloads</span>
      <span class="tag is-primary">1.2M</span>
    </div>
  </div>
</div>

Interactive Tags

Make tags clickable or selectable:

<!-- Link tag -->
<a class="tag is-link" href="#">
  Clickable Tag
</a>

<!-- Button tag -->
<button class="tag is-primary" onclick="handleTagClick()">
  Button Tag
</button>

<!-- Selectable tags -->
<div class="tags are-medium">
  <span class="tag is-selectable">Option 1</span>
  <span class="tag is-selectable is-selected">Option 2</span>
  <span class="tag is-selectable">Option 3</span>
</div>

<!-- Radio button tags -->
<div class="tags">
  <label class="tag">
    <input type="radio" name="category" value="tech">
    Technology
  </label>
  <label class="tag">
    <input type="radio" name="category" value="design">
    Design
  </label>
  <label class="tag">
    <input type="radio" name="category" value="business">
    Business
  </label>
</div>

JavaScript Integration

Add interactivity to tags:

// Handle deletable tags
document.addEventListener('DOMContentLoaded', () => {
  // Remove tag when delete button is clicked
  document.querySelectorAll('.tag .delete').forEach(deleteBtn => {
    deleteBtn.addEventListener('click', function() {
      this.parentElement.remove();
    });
  });
  
  // Toggle selectable tags
  document.querySelectorAll('.tag.is-selectable').forEach(tag => {
    tag.addEventListener('click', function() {
      this.classList.toggle('is-selected');
    });
  });
});

// Filter system with tags
class TagFilter {
  constructor() {
    this.tags = new Set();
    this.init();
  }
  
  init() {
    // Add tag when clicked
    document.querySelectorAll('.filter-tag').forEach(tag => {
      tag.addEventListener('click', () => {
        const value = tag.dataset.value;
        if (this.tags.has(value)) {
          this.tags.delete(value);
          tag.classList.remove('is-primary');
          tag.classList.add('is-light');
        } else {
          this.tags.add(value);
          tag.classList.remove('is-light');
          tag.classList.add('is-primary');
        }
        this.applyFilter();
      });
    });
  }
  
  applyFilter() {
    const items = document.querySelectorAll('.filter-item');
    items.forEach(item => {
      const itemTags = item.dataset.tags.split(' ');
      const hasAllTags = Array.from(this.tags).every(tag => 
        itemTags.includes(tag)
      );
      
      if (this.tags.size === 0 || hasAllTags) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    });
  }
}

// Initialize tag filter
new TagFilter();

// Dynamic tag input
class TagInput {
  constructor(inputId, containerId) {
    this.input = document.getElementById(inputId);
    this.container = document.getElementById(containerId);
    this.tags = new Set();
    this.init();
  }
  
  init() {
    this.input.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ',') {
        e.preventDefault();
        this.addTag(this.input.value.trim());
        this.input.value = '';
      }
    });
    
    // Load existing tags
    this.container.querySelectorAll('.tag').forEach(tag => {
      const text = tag.textContent.trim();
      if (text && !tag.querySelector('.delete')) {
        this.tags.add(text);
      }
    });
  }
  
  addTag(text) {
    if (!text || this.tags.has(text)) return;
    
    this.tags.add(text);
    
    const tag = document.createElement('span');
    tag.className = 'tag is-primary';
    tag.innerHTML = `
      ${text}
      <button class="delete is-small"></button>
    `;
    
    const deleteBtn = tag.querySelector('.delete');
    deleteBtn.addEventListener('click', () => {
      tag.remove();
      this.tags.delete(text);
    });
    
    this.container.appendChild(tag);
  }
  
  getTags() {
    return Array.from(this.tags);
  }
}

// Initialize tag input
const tagInput = new TagInput('tag-input', 'tags-container');

Practical Examples

Blog Post Categories

<article class="box">
  <h2 class="title is-4">Understanding Flexbox</h2>
  <div class="tags mb-3">
    <span class="tag is-primary">CSS</span>
    <span class="tag is-info">Layout</span>
    <span class="tag is-success">Tutorial</span>
    <span class="tag is-warning">Intermediate</span>
  </div>
  <p>Article content goes here...</p>
  <div class="tags are-small mt-4">
    <span class="tag is-light">#flexbox</span>
    <span class="tag is-light">#webdev</span>
    <span class="tag is-light">#frontend</span>
    <span class="tag is-light">#responsive</span>
  </div>
</article>

Status Indicators

<div class="table-container">
  <table class="table is-fullwidth">
    <thead>
      <tr>
        <th>Task</th>
        <th>Status</th>
        <th>Priority</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Design homepage</td>
        <td>
          <span class="tag is-success">
            <span class="icon is-small"><i class="fas fa-check"></i></span>
            <span>Completed</span>
          </span>
        </td>
        <td><span class="tag is-primary">High</span></td>
      </tr>
      <tr>
        <td>Write documentation</td>
        <td>
          <span class="tag is-warning">
            <span class="icon is-small"><i class="fas fa-clock"></i></span>
            <span>In Progress</span>
          </span>
        </td>
        <td><span class="tag is-info">Medium</span></td>
      </tr>
      <tr>
        <td>Fix mobile layout</td>
        <td>
          <span class="tag is-danger">
            <span class="icon is-small"><i class="fas fa-exclamation"></i></span>
            <span>Blocked</span>
          </span>
        </td>
        <td><span class="tag is-warning">Low</span></td>
      </tr>
    </tbody>
  </table>
</div>

Filter System

<div class="box">
  <h3 class="title is-5">Filter Products</h3>
  
  <div class="field">
    <label class="label">Category</label>
    <div class="tags">
      <span class="tag filter-tag is-primary" data-value="electronics">
        Electronics
      </span>
      <span class="tag filter-tag is-light" data-value="clothing">
        Clothing
      </span>
      <span class="tag filter-tag is-light" data-value="books">
        Books
      </span>
      <span class="tag filter-tag is-light" data-value="home">
        Home & Garden
      </span>
    </div>
  </div>
  
  <div class="field">
    <label class="label">Price Range</label>
    <div class="tags">
      <span class="tag filter-tag is-light" data-value="under-50">
        Under $50
      </span>
      <span class="tag filter-tag is-primary" data-value="50-100">
        $50 - $100
      </span>
      <span class="tag filter-tag is-light" data-value="over-100">
        Over $100
      </span>
    </div>
  </div>
  
  <div class="field">
    <label class="label">Tags</label>
    <div class="tags" id="selected-tags">
      <span class="tag is-primary">
        On Sale
        <button class="delete is-small"></button>
      </span>
    </div>
    <div class="control">
      <input class="input" type="text" placeholder="Add tag..." id="tag-input">
    </div>
  </div>
</div>

Package Information

<div class="card">
  <div class="card-content">
    <div class="media">
      <div class="media-content">
        <p class="title is-4">bulma</p>
        <p class="subtitle is-6">Modern CSS framework based on Flexbox</p>
      </div>
    </div>
    
    <div class="content">
      <div class="field is-grouped is-grouped-multiline">
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-dark">Version</span>
            <span class="tag is-info">1.0.0</span>
          </div>
        </div>
        
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-dark">License</span>
            <span class="tag is-success">MIT</span>
          </div>
        </div>
        
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-dark">Downloads</span>
            <span class="tag is-primary">1.2M</span>
          </div>
        </div>
        
        <div class="control">
          <div class="tags has-addons">
            <span class="tag is-dark">Size</span>
            <span class="tag">25KB</span>
          </div>
        </div>
      </div>
      
      <div class="tags mt-4">
        <span class="tag is-light">css</span>
        <span class="tag is-light">framework</span>
        <span class="tag is-light">flexbox</span>
        <span class="tag is-light">responsive</span>
        <span class="tag is-light">modern</span>
      </div>
    </div>
  </div>
</div>

User Skills Display

<div class="box">
  <div class="media">
    <div class="media-left">
      <figure class="image is-64x64">
        <img class="is-rounded" src="avatar.jpg" alt="Avatar">
      </figure>
    </div>
    <div class="media-content">
      <p class="title is-5">John Doe</p>
      <p class="subtitle is-6">Frontend Developer</p>
      
      <div class="tags are-medium">
        <span class="tag is-primary">
          <span class="icon"><i class="fab fa-js"></i></span>
          <span>JavaScript</span>
        </span>
        <span class="tag is-info">
          <span class="icon"><i class="fab fa-react"></i></span>
          <span>React</span>
        </span>
        <span class="tag is-success">
          <span class="icon"><i class="fab fa-vuejs"></i></span>
          <span>Vue.js</span>
        </span>
        <span class="tag is-warning">
          <span class="icon"><i class="fab fa-angular"></i></span>
          <span>Angular</span>
        </span>
        <span class="tag is-danger">
          <span class="icon"><i class="fab fa-node-js"></i></span>
          <span>Node.js</span>
        </span>
      </div>
      
      <div class="tags are-small mt-2">
        <span class="tag is-light">TypeScript</span>
        <span class="tag is-light">GraphQL</span>
        <span class="tag is-light">Webpack</span>
        <span class="tag is-light">Jest</span>
        <span class="tag is-light">Docker</span>
      </div>
    </div>
  </div>
</div>

Best Practices

• Use tags for non-interactive labels and badges
• Choose colors that match the context (success, warning, danger, etc.)
• Use is-rounded for a more modern, pill-shaped appearance
• Include icons for better visual recognition
• Use has-addons for paired information (key-value pairs)
• Make deletable tags for filter systems and tag inputs
• Group related tags with .tags container
• Consider accessibility - ensure sufficient color contrast
• Use appropriate sizes - small for dense interfaces, medium/large for emphasis

Next: Bulma Title Component