Tag

DefaultOutlineFilledRemovable󰔦

Contract

Overview

Machine-readable contract from Component Spec.

component: tagexport: Tagversion: 1recipe: chiptokens.visual: chipattributes: data-refineui=chip

Anatomy

Part	data-refineui
root	chip
remove	chip-remove

Variants

Axis	Values
variant	default, outline, filled
size	sm, md, lg

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir, prefers-contrast

Accessibility

Slot	Element	Native
chip-remove	button	true

Keyboard

Key	Action	Native
Enter	activate	true
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

Tokens

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

Variant

Select...󰯑

defaultOutlineRemovable󰔦

Recipe → Tokens

Slot bindings for variant="default" — declared in chip.recipe.ts.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
root	default	background	chip.default.background	backgroundSurface	neutralWhite	neutral800	bg-refineui-alias-background-surface
root	default	foreground	chip.default.foreground	foregroundBrand	primaryBlack	primaryGray	text-refineui-alias-foreground-brand

Component token trace

All paths in token-trace-v2.json prefixed with chip.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
chip.default.activeBackground	backgroundPrimaryActive	neutral150	neutral800	#F0F0F0	#2A2A2A
chip.default.background	backgroundSurface	neutralWhite	neutral800	#FFFFFF	#2A2A2A
chip.default.disabledBackground	backgroundSurfaceDisabled	neutral150	neutral850	#F0F0F0	#222222
chip.default.disabledForeground	foregroundDisabled	neutral400	neutral600	#CECECE	#6C6C6C
chip.default.foreground	foregroundBrand	primaryBlack	primaryGray	#212121	#D4D4D4
chip.default.hoverBackground	backgroundPrimaryHover	neutral100	neutral850	#F5F5F5	#222222
chip.filled.activeBackground	backgroundBrandActive	neutralBlack	primaryLightGray	#000000	#E6E6E6
chip.filled.background	backgroundBrand	primaryBlack	primaryGray	#212121	#D4D4D4
chip.filled.disabledBackground	backgroundSurfaceDisabled	neutral150	neutral850	#F0F0F0	#222222
chip.filled.disabledForeground	foregroundDisabled	neutral400	neutral600	#CECECE	#6C6C6C
chip.filled.foreground	foregroundInversed	neutralWhite	primaryBlack	#FFFFFF	#212121
chip.filled.hoverBackground	backgroundBrandHover	primaryDarkGray	primaryLightGray	#4d4d4d	#E6E6E6
chip.outline.activeBorder	borderFocus	neutral750	neutral350	#333333	#D8D8D8
chip.outline.border	borderDefault	neutral300	neutral650	#DBDBDB	#5B5B5B
chip.outline.disabledBorder	borderDisabled	neutral250	neutral700	#E0E0E0	#404040
chip.outline.disabledForeground	foregroundDisabled	neutral400	neutral600	#CECECE	#6C6C6C
chip.outline.foreground	foregroundBrand	primaryBlack	primaryGray	#212121	#D4D4D4
chip.outline.hoverBorder	borderHover	neutral500	neutral500	#A4A4A4	#A4A4A4

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Chip } from "@refineui/react";

<Chip>Tag Label</Chip>

<Chip variant="filled">Filled</Chip>

<Chip variant="outline" size="sm">Small Tag</Chip>

<Chip onRemove={() => handleRemove()}>
  Removable
</Chip>

<Chip avatar={<Avatar src="/user.jpg" />}>
  With Avatar
</Chip>

API Reference

Prop	Default	Type	Description
variant	"default"	"default" | "outline" | "filled"	Visual variant style.
size	"md"	"sm" | "md" | "lg"	Chip size tier.
avatar	—	ReactNode	Optional leading avatar element.
onRemove	—	() => void	When provided, shows remove button.
disabled	false	boolean	Disables interaction.