TagChip
A small tag with a colored dot, outlined by default or soft or solid in its tone.
import { TagChip } from "@butteryui/react";Demo
When to use it
Use it for
- Tags on a catalog card, such as new, popular or free trial
- A few words that sort things into kinds, in a row of tags
- A tag that should carry its tone in more than its dot, with variant="soft", or stand out on a busy card, with variant="solid"
Not for
- A status, such as paid or overdue: use StatusBadge
- A filter someone can remove: use FilterPill
- A count: use ValueBadge
Examples
Add on tags
An add-on's name over the tags that say what kind it is, one of them following its trial.
Filtered tags
Tags that a filter narrows down: only the add-ons with a free trial stay.
2 add-ons
Tag looks
A coffee's tags in each look: outlined by default, soft to carry the tone in its words, solid to stand out.
Variants and states
Tones
The dot takes its tone's color; the words say what it is.
Outline, soft and solid
Outline, the default, colors only the dot; soft puts the words on the tone's subtle background; solid fills the tag with the tone's strong color. All three keep one size.
Props
TagChip
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | string | What the tag says, such as "Free trial". | |
tone | "neutral" | "info" | "success" | "warning" | "danger" | "neutral" | The tag's color: "neutral" (the default), "info", "success", "warning" or "danger". |
variant | "soft" | "solid" | "outline" | "outline" | "outline" (the default), a 1px border edge with only the dot in the tone's color; "soft", on the tone's
subtle background with its words in the tone; or "solid", filled with the tone's strong color. |
It also takes Omit<ComponentPropsWithRef<"span">, "children">.
Accessibility
Text: its words are read and its dot is hidden from screen readers, so the color never carries meaning on its own. Long words truncate with the full text in a title.
It takes no keyboard input of its own.
Motion
It doesn't move.
With reduced motion: Nothing changes.
Layout
It's --bt-h-badge (20px) tall and as wide as its dot, its words and its padding, in every variant: soft and solid keep the outline's 1px edge, transparent. It's never wider than its container, where long words truncate with an ellipsis and show in full as its title, and it takes no input, so it has no hit area.
Related
See it in the Halfmoon shop demo.