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

hTWOo Patterns to setup custom style guide

---
title: Tag Primary (Link)
order: 23
---

# Tag Primary (Link)

A clickable tag component with primary theme styling, implemented as a link for navigation.

## Overview

The primary link tag is an interactive meta component with enhanced visual emphasis using the primary theme colors. It's used for highlighting important navigational tags.

## Usage

Primary link tags should be used when:
* The tag navigation is of primary importance
* You want to highlight specific navigational tags
* The tag represents a featured category or section
* The link deserves visual emphasis

## States

* **Default** - Primary themed appearance
* **Hover** - Visual feedback when mouse is over the tag
* **Focus** - When the tag receives keyboard focus
* **Active** - When the tag is being clicked
* **Visited** - After the link has been visited (if styled)

## SCSS

**Component Import**

**SCSS Partial Location**

## CSS Classes

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

## Attributes

* `href` - The URL that the link points to
* `target` - Optional target window (e.g., `_blank` for new tab)
* `rel` - Relationship attributes, use `rel="noopener noreferrer"` with `target="_blank"`

## Accessibility

* Link tags have built-in keyboard accessibility
* They can be focused using the Tab key
* They can be activated using the Enter key
* If opening in a new window, consider adding an indicator and appropriate aria attributes
* For external links, consider adding `aria-label` with additional context
* Ensure sufficient color contrast with the primary theme colors