@n8d/htwoo-patterns/_patterns/atoms/meta/tag-static-primary.md

hTWOo Patterns to setup custom style guide

---
title: Tag Primary (Static)
order: 25
---

# Tag Primary (Static)

A non-interactive tag component with primary theme styling for display purposes.

## Overview

The primary static tag is a non-clickable meta component with enhanced visual emphasis using the primary theme colors. It's used for highlighting important information or statuses.

## Usage

Primary static tags should be used when:
* The tag information is of primary importance
* You want to highlight specific metadata
* The tag represents a featured or important status
* The information deserves visual emphasis

## SCSS

**Component Import**

**SCSS Partial Location**

## CSS Classes

* `.hoo-mtag-primary` - Primary theme tag class
* `.hoo-mtag-lbl` - Inner text container

## Accessibility

* Since static tags are not interactive, they don't receive focus
* Use appropriate ARIA attributes for tags that convey state information:
  * For status tags: `role="status"` or appropriate ARIA live regions
  * For tags representing important metadata: consider `aria-label` on the container
* Ensure sufficient color contrast for readability with the primary theme colors

## Customization

Primary static tags maintain the primary theme color but can be customized with:
* Additional classes for specific styling needs
* Combined with icons for enhanced visual meaning
* Custom padding or sizing for specific layout requirements