Data Display · astro-ui · Tag

Tag

Categorization label with shapes and optional close affordance.

Tag marks membership in a set — categories, filters, keywords. Unlike Badge (status/count), Tag is for grouping. Optional closable renders an accessible × button that stays zero-JS.

← All components

Features

9 color variants
3 shapes: rounded, square, pill
closable with accessible label
content prop or slot

Usage

---
import { Tag } from "astro-ui";
---

<Tag>astro</Tag>
<Tag variant="soft" shape="pill">design</Tag>
<Tag variant="outline" closable closeLabel="Remove astro">astro</Tag>

Demos

Variants & shapes

astrodesignzero-jsstabletokens

<Tag>astro</Tag>
<Tag variant="soft" shape="pill">design</Tag>
<Tag variant="outline">zero-js</Tag>
<Tag variant="success" shape="square">stable</Tag>
<Tag variant="info" closable closeLabel="Remove token">tokens</Tag>

API

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "outline" \| "soft" \| "success" \| "warning" \| "destructive" \| "info" \| "muted"`	`"primary"`	Color scheme.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Scale.
`shape`	`"rounded" \| "square" \| "pill"`	`"rounded"`	Corner shape.
`content`	`string`	`—`	Text when no slot content.
`closable`	`boolean`	`false`	Render dismiss button.
`closeLabel`	`string`	`"Remove"`	Accessible dismiss label.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.
`ariaLabel`	`string`	`—`	Accessible name.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

Tag or Badge?

Tag = membership in a set (filter chips, keywords). Badge = status or count attached to something else.

Changelog

Version history mentioning Tag.

v0.1.0 — 2026-11-11

added

Data display (10): Badge, Avatar, Attachment, Table, Progress, Bubble, Chart, Empty, Tag, Timeline.

Tag