Tag

A small label chip with colour variants and an optional dismiss button.

Preview

ReactTypeScriptTailwindAccessibleMIT

Usage

import { Tag } from "anexui";

<Tag>React</Tag>

Variants

<Tag variant="default">Default</Tag>
<Tag variant="primary">Primary</Tag>
<Tag variant="success">Merged</Tag>
<Tag variant="warning">Pending</Tag>
<Tag variant="error">Rejected</Tag>
<Tag variant="info">In review</Tag>

Dismissible

import { useState } from "react";
import { Tag } from "anexui";

function Example() {
  const [tags, setTags] = useState(["React", "TypeScript", "Tailwind"]);
  return (
    <div style={{ display: "flex", gap: 8 }}>
      {tags.map(t => (
        <Tag
          key={t}
          variant="primary"
          onRemove={() => setTags(tags.filter(x => x !== t))}
          removeLabel={`Remove ${t}`}
        >
          {t}
        </Tag>
      ))}
    </div>
  );
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | variant | "default" \| "primary" \| "success" \| "warning" \| "error" \| "info" | "default" | Colour scheme | | onRemove | () => void | — | Renders a × dismiss button when provided | | removeLabel | string | "Remove" | aria-label for the dismiss button |

All standard HTML <span> attributes are accepted.

Accessibility

Dismiss button has explicit aria-label (defaults to "Remove", override with removeLabel)
The label includes the tag text for context — e.g. "Remove React"