# TagGroup

> A labeled set of pill-shaped tags with an optional dismiss control per tag, composing a grouping host, a wrapped list, and each tag's own pill and remove button.

```ts
import { TagGroup } from "@sdxc/ui";
```

Renders the group's `<div>` host, laying its TagGroup.List child
(and any preceding `Label`) out in a column with a small gap. Dev mode
warns when it lacks an accessible name for assistive technology.

## Examples

```tsx
<TagGroup aria-label={t("skills.label")}>
	<TagGroup.List>
		<TagGroup.Tag color="brand">{t("skills.design")}</TagGroup.Tag>
		<TagGroup.Tag color="success">{t("skills.shipped")}</TagGroup.Tag>
	</TagGroup.List>
</TagGroup>
```

## Props

Also accepts everything in `ElementProps<"div">`.


### TagGroup.List

Renders the group's `<ul>` list, resetting native list markers and spacing and laying TagGroup.Tag children out as a wrapped row with a small gap between them.

Also accepts everything in `ElementProps<"ul">`.


### TagGroup.Tag

Renders a single pill-shaped `<li>`, colored through the `data-color` attribute contract shared with Badge and sized through `data-size`.

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role. Defaults to DEFAULT_COLOR. |
| `size?` | `"sm" \| "md"` | Size variant. Defaults to DEFAULT_SIZE. |

Also accepts everything in `ElementProps<"li">`.


### TagGroup.Remove

Renders a dismiss control for the tag it's composed inside: a small, ghost-styled Button with an "X" glyph submitting as `type="submit"`, colored from the ambient TagGroup.Tag's `data-color`.

| Prop | Type | Description |
| --- | --- | --- |
| `"aria-label"` | `string` | Accessible label for the icon-only control — required, since the button carries no visible text for assistive technology to read. |

Also accepts everything in `Omit<
		Button.Props,
		"children" | "variant" | "color" | "size" | "type" | "aria-label"
	>`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role, each mapped to its matching `--ui-*` variables — the same set Badge and Button use. |
| `Size` | `"sm" \| "md"` | Size variant controlling a tag's padding and font size. |