Chip

A compact item that can be selected or removed, used for filters and entered values.

Refined portWildChip.vueData Display/ChipWChip

Try it

Click the chip to select it, and the cross to remove it.

Variant

Size

Selected

Removable

Disabled

<WildChip
  variant="outline"
  size="md"
  removable
>
  Bore 12
</WildChip>

When to use

Use a chip for something a person chose and can change: a filter, a recipient, a selected site.
Use a chip for a choice and a badge for a fact. A chip has fully round ends; a badge is a small rounded rectangle.
Use outline by default. Keep the colour variants for a filter on that state, such as Offline on error.

Don’t use it

To label a status nobody can change. Use a badge.

Variants

Five. Outline is the default and covers most uses.

Bore 12

outline

Bore 12

accent

Bore 12

success

Bore 12

warning

Bore 12

error

<WildChip variant="outline" removable>Bore 12</WildChip>
<WildChip variant="accent" selected>North paddock</WildChip>

Sizes

Bore 12

sm · 28

Bore 12

md · 32

Bore 12

lg · 36

States

rest

hover

active

focus

outline

Bore 12

accent

Bore 12

success

Bore 12

warning

Bore 12

error

Bore 12

selected

Bore 12

Selected is a value, so it stays when the pointer leaves. Hover deepens a selected chip’s fill, so it still reads as pressable.

North paddock

selected

Bore 12

disabled

Remove button

The × takes the chip’s own colour, and hovering it fills a circle in the chip’s light step. On a selected chip it takes the chip’s ink.

Bore 12

outline

Bore 12

accent

Bore 12

success

Bore 12

warning

Bore 12

error

North paddock

selected

<WildChip variant="success" removable>Reporting</WildChip>

Point at each ×. The circle sits inside a 24px target, so pressing it never touches the chip’s edge.

Accessibility

A selectable chip is a toggle button, so a screen reader hears its label and whether it’s pressed. The cross is a separate button named “Remove” plus the label.

Key	What it does
Tab	Moves to the chip, then to its cross.
Enter / Space	Toggles the chip, or removes it from the cross.

Props

Prop	Type	Default	Description
variant	'outline' \| 'accent' \| 'success' \| 'warning' \| 'error'	'outline'	Outline, or the state a filter is on.
size	'sm' \| 'md' \| 'lg'	'md'	28, 32 or 36px tall.
selected	boolean	false	Filled, with a tick.
onSelect	(next: boolean) => void	—	Makes the chip a toggle. Receives the next value.
removable	boolean	false	Draws the remove cross.
onDismiss	() => void	—	Called when the cross is pressed.
disabled	boolean	false	Dims the chip and blocks both actions.
avatar	ReactNode	—	Leading avatar, for a person.
icon	ReactNode	—	Leading icon. Replaces the tick.
trailingIcon	ReactNode	—	Trailing icon, such as a menu caret.
children	ReactNode	—	The label.

Tokens

Token	Value	Where it lands
(no token)	24px	Corners.
--color-border-default	#E6E6E6	Outline border.
--color-primary-light	#EBFAFF	Accent ground.
--global-blue-1100	#0C296A	Accent text; selected fill on hover.
--global-blue-1000	#1877F2	Selected fill, under white text.
--global-blue-1000	#1877F2	Focus ring, outside a 2px gap.
--global-{family}-1000 / 1100	the chip’s family	The × at rest, then on hover.
--global-{family}-200 / 300	the chip’s family	The × circle on hover, then pressed.
--global-neutral-grey-1000 / 1300	#4F4D55 / #0A090B	Outline chip’s ×, rest and hover.
--global-neutral-grey-300 / 400	#F1F1F1 / #ECECED	Outline chip’s × circle.
(no token)	white 24% / 36%	Selected chip’s × circle, hover and pressed.
(no token)	#0A090B 12% / 20%	The same circle on the amber fill.
--font-weight-semibold	500	Label weight.