Tag v0.1.0 Data display

Chip for filters and selections, optionally dismissible.

import { Tag } from "latticeui-react";

Examples

Tones

designreactdeprecated

Show code

<Tag>design</Tag>
<Tag tone="accent">react</Tag>
<Tag tone="danger">deprecated</Tag>

Dismissible

reactvuesveltesolid

Show code

const [tags, setTags] = useState(["react", "vue", "svelte"]);

{tags.map((tag) => (
  <Tag key={tag} tone="accent" onDismiss={() => setTags(tags.filter((t) => t !== tag))}>
    {tag}
  </Tag>
))}

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`span`	`[data-scope="tag"][data-part="root"]`
`label`	`span`	`[data-scope="tag"][data-part="label"]`
`close`	`button`	`[data-scope="tag"][data-part="close"]`

Props

Prop	Type	Default	Description
`tone`	`"neutral" \| "accent" \| "danger"`	`"neutral"`
`onDismiss`	`() => void`	—	Renders a labelled remove button when set.

Accessibility

Roles:

Key	Action
`Enter / Space`	activates the remove button

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="tag"][data-part="root"] {
  /* your overrides */
}

Component tokens: --tag-bg--tag-fg

State attributes: data-tone