Tag Component

Flexible tag/badge component for labels, categories, and status indicators with 7 variants and removable functionality.

Tag Variants

Default Primary Secondary Success Warning Danger Info

Tag Sizes

Small Medium Large

Removable Tags

Design Marketing Published Delete

Interactive Tags (Links)

Design Development Strategy

Tag Groups

Blog Post Tags

UX Design Research Accessibility Best Practices

Project Status

Active In Progress Overdue Archived

Usage Examples

Basic Tag

<x-fds.tag>Design</x-fds.tag>

Removable Tag

<x-fds.tag 
    variant="primary" 
    removable="true"
    @tag-removed="handleTagRemoved"
>
    Marketing
</x-fds.tag>

As Link

<x-fds.tag href="/tags/design" variant="secondary">
    Design
</x-fds.tag>

Props API

variant - default, primary, secondary, success, warning, danger, info
size - sm, md, lg (default: md)
removable - Boolean (default: false)
href - URL to link to (renders as <a> tag)

Alpine.js Event

When a tag is removed, it dispatches tag-removed event with payload:

{ tag: 'Tag Name', id: 'tag-xyz123' }

Article Category Tags for Blog

Color-coded category tags for blog posts using Festa's brand colors.

Design tips Trends Strategy Case Studies

SDG Badges for Case Studies

Sustainable Development Goals badges with official UN icons for case study impact areas.

SDG 2

SDG 3

SDG 4

SDG 5

SDG 6

SDG 7

SDG 8

SDG 9

SDG 10

SDG 11

SDG 12

SDG 13

SDG 14

SDG 15

SDG 16

SDG 17

SDG Interactive Filter Buttons

Clickable SDG filter buttons for case study filtering with hover and focus states.

Interactive Category Filter Buttons

Color-coded filter buttons with active state showing solid background.

Work Categories and Filter Tags

Sector and industry tags for case study categorization.

Nonprofit Healthcare Climate Action

Interactive Filter Buttons

Clickable sector-based filter buttons with hover states.

Active/Selected State Filters

Visual demonstration of selected filter states with stronger borders and backgrounds.

Tags with Icons

Tags with left icon and dismissible tags with X button.

With Icon Dismissible