Skip to content

Badge Component¶

Version: 0.6.0
Last Updated: January 3, 2026
Location: src/templates/partials/badges.html

Badges are small, colored labels used to display status, priority, or categorical information on tickets and other objects.

Overview¶

Badges provide quick visual indicators without taking up much space. They're commonly used for:

Ticket status (Open, In Progress, Resolved, Closed)
Priority levels (Low, Medium, High, Urgent)
Category or tag labels
Count indicators
Alert states

Usage¶

Basic Badge¶

<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>

Status Badges¶

<!-- Ticket Status -->
<span class="badge bg-info">Open</span>
<span class="badge bg-warning">In Progress</span>
<span class="badge bg-success">Resolved</span>
<span class="badge bg-secondary">Closed</span>

<!-- Priority Badges -->
<span class="badge bg-success">Low Priority</span>
<span class="badge bg-warning">High Priority</span>
<span class="badge bg-danger">Urgent</span>

In Templates¶

<span class="badge bg-{{ ticket.status_color }}">
    {{ ticket.get_status_display }}
</span>

Badge Styles¶

Colors¶

Class	Use Case
`bg-primary`	Information
`bg-success`	Complete, resolved
`bg-danger`	Error, critical
`bg-warning`	Pending, caution
`bg-info`	Open, default
`bg-secondary`	Inactive, archived

Implementation¶

View Implementation¶

from django.views.generic import ListView
from tickets.models import Ticket

class TicketListView(ListView):
    model = Ticket

    STATUS_COLORS = {
        'open': 'info',
        'in_progress': 'warning',
        'resolved': 'success',
        'closed': 'secondary',
    }

    def get_context_data(self, **kwargs):
        ctx = super().get_context_data(**kwargs)
        ctx['status_colors'] = self.STATUS_COLORS
        return ctx

Template Usage¶

<span class="badge bg-{{ status_colors|get:ticket.status }}">
    {{ ticket.get_status_display }}
</span>

Best Practices¶

✅ Use consistent colors for same meanings
✅ Include text - don't rely on color alone
✅ Keep text short (1-2 words)
❌ Don't use too many per item
❌ Don't make badges interactive

Resources¶