Chip

A compact, anchor-based tag — optionally a link and/or removable.

When to use

Use Chip for tags, filters, selected values, or small inline labels. Like Button it is anchor-based (built on the same useAnchorProps engine), so it can act as a link (href / as={Link}) or as a button (onClick / type="submit"), and it can render a remove control via onClose.

There is no @uxf/form twin. For a static, non-interactive status label use Lozenge; for a numeric count use Badge.

Usage

import { Chip } from "@uxf/ui/chip";

// plain tag
<Chip color="blue">Marketing</Chip>

// removable
<Chip color="green" onClose={() => removeTag(id)}>Design</Chip>

// link
import Link from "next/link";
<Chip as={Link} color="blue" href="/tags/news">News</Chip>

Props

Extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "color" | "type"> and UseAnchorProps, so standard <a> attributes (href, target, rel, download, onClick, className, children, …) are accepted.

A string child is wrapped in <span class="uxf-chip__text">; other children are rendered as-is.

Variants & states

Built-in values (from theme.ts):

ChipColors, ChipSizes and ChipVariants are open interfaces, so a project can add its own values via module augmentation:

// chip.d.ts
declare module "@uxf/ui/chip/theme" {
    interface ChipColors {
        brand: true;
    }
}

Interactive behaviour comes from useAnchorProps (same as Button): with href it is a link, with onClick or type="submit" it gets role="button", and rel="noopener noreferrer" is added automatically for target="_blank". isDisabled / isLoading drive the busy/disabled classes and remove it from the tab order.

Requirements

Client component ("use client").

Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/chip.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.

The remove button's label is resolved via useUxfTranslation under the uxf-ui-chip:remove-item key (translations shipped in translations.ts).