# Tag

## Essence

Small universal noninteractive metadata tag used inside card metadata rows and content previews.

`Tag` renders compact noninteractive category or status text such as `Project`, `Note`, `Artifact`, `Available`, or `Coming soon`.

## Hook

Use wherever a compact metadata value is informational, not independently clickable.

## Internal Rules

- Uses Caption-size typography.
- Uses neutral metadata styling.
- Does not use accent styling unless the tag becomes interactive in a future component.
- Uses radius and spacing tokens.
- Width is wrap content.
- Height is wrap content.
- Does not stretch vertically inside metadata rows.
- Does not own card layout.
- Does not represent disabled state.
- Does not imply clickability.

## Use When

- A component needs a compact label, status, or topic marker.
- `Article Card` or `Article Page` needs compact topic metadata.
- A teaser needs to show category, lifecycle, or topic text without making the tag interactive.

## Do Not Use When

- A generic interactive tag/chip/filter system is needed.
- The value should be interactive.
- The value indicates disabled behavior.

## Props

| Prop | Values | Purpose |
| --- | --- | --- |
| `label` | string | Visible tag text. |

## Accessibility Notes

- The tag is plain text metadata.
- Parent card owns article/link semantics.
- Do not use tag color as the only way to communicate availability.
- Do not use accent color for noninteractive tags because it implies action in this design system.

## Related Components And Patterns

- `Article Card`: consumes `Tag` for article topics.
- `Article Page`: consumes `Tag` for article topics.
- `Caption`: typography scale reference.
- `Status`: canonical prop concept for lifecycle text.
- `Label`: canonical prop concept for category/type text.

## Code Paths

- `packages/design-system/src/components/Tag.astro`
- `packages/design-system/src/components/ArticleCard.astro`
- `packages/design-system/src/components/ArticlePage.astro`
- `apps/portfolio-site/src/pages/design-system/index.astro`