Tokens

AppChip

A compact token — a chosen value, a filter tag, a removable label. The chip a multi-select renders for each pick.

<app-chip tone="success" leading-icon="check-circle">Verified</app-chip>

A chip is a compact token that stands in for one thing — a selected value, an applied filter, a removable label. It's what a multi-select renders for each chosen option and what a filter bar shows for each active facet.

<app-chip> is a display / removable token, not a form control — reach for <app-choice-chip> when the user is picking from a set. Its look comes entirely from the shared @webority/theme, so the Razor <app-chip> and the React <AppChip> render identically on every Webority surface.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the chip above it.

label tone variant size leading-icon avatar (image) removable — wires onRemove remove-label clickable — wires onClick disabled

Tag

<app-chip>Tag</app-chip>

avatar wins over leading-iconWhen both are set, avatar takes the leading slot and leading-icon is ignored — a chip only ever shows one leading glyph.

Tones

Six tones carry meaning — neutral by default, and success / warning / danger / info / primary when the chip reflects a state or category.

The six tones

Neutral Primary Success Warning Danger Info

Show code

<app-chip>Neutral</app-chip>
<app-chip tone="primary">Primary</app-chip>
<app-chip tone="success">Success</app-chip>
<app-chip tone="warning">Warning</app-chip>
<app-chip tone="danger">Danger</app-chip>
<app-chip tone="info">Info</app-chip>

Tone is meaning, not decorationPick a tone because it says something — success for a verified tag, danger for a blocking one. Colour a chip for looks and you dilute the signal when a tone genuinely matters.

Variants

Three colour treatments of the same tone — a tinted surface (soft, the default), a tinted surface with a coloured border (outline), and a filled pill with contrasting text (solid).

soft · outline · solid

Soft Outline Solid

Show code

<app-chip tone="primary">Soft</app-chip>
<app-chip tone="primary" variant="outline">Outline</app-chip>
<app-chip tone="primary" variant="solid">Solid</app-chip>

Every tone in every variant

Neutral Primary Success Warning Danger Info

solid keeps its contrastThe solid fills are the deep, white-safe tones — warning in particular uses a darker gold so its white label still clears AA (a vivid yellow with white text does not), and every fill flips correctly in dark mode.

Leading icon

A leading glyph reinforces the chip's meaning at a glance — a tick for verified, a calendar for scheduled.

A glyph before the label

Verified Draft Scheduled

Show code

<app-chip tone="success" leading-icon="check-circle">Verified</app-chip>
<app-chip leading-icon="pencil">Draft</app-chip>
<app-chip tone="info" leading-icon="calendar">Scheduled</app-chip>

Or lead with an avatarA chip can lead with an avatar instead of an icon — pass an image to avatar to show a person or account, handy for “assigned to” or member chips.

Removable

Set removable and it grows a dismiss ✕ — clicking it removes the chip (wired automatically by the shared page script) — the pattern for each value in a multi-select or each tag in a filter bar.

A row of removable tags

Each ✕ drops that tag from the set.

Lightning IEC 62305 Zone 1 Rev B

Show code

<app-chip removable="true">Lightning</app-chip>
<app-chip removable="true">IEC 62305</app-chip>
<app-chip removable="true">Zone 1</app-chip>
<app-chip removable="true">Rev B</app-chip>

Sizes

Two sizes. Default (md) suits most places; use sm inside dense rows and compact filter bars.

sm · md

Small Medium

Show code

<app-chip size="sm" tone="primary" leading-icon="check-circle">Small</app-chip>
<app-chip size="md" tone="primary" leading-icon="check-circle">Medium</app-chip>

When to use

Use it when

A multi-select needs to show each chosen value as a removable token.
A filter bar shows the active facets, each dismissible.
You are labelling something with a small tag — a category, a state, a version.

Reach for something else when

The user is picking one option from a set (a form control). → AppChoiceChip
You are showing a small count or a bare label. → AppBadge
You are showing a status mapped from an enum. → AppStatusBadge
It is really a button that performs an action. → AppButton

Best practices

Lightning Zone 1 Rev B

Removable chips for applied filters — the user sees exactly what is active and can clear each one.

Don't

Lightning Zone 1 Rev B

Three tones on three peer filters invent meaning that isn’t there — keep peers one tone.

Verified

One clear tone + a reinforcing glyph — the chip reads at a glance.

Don't

Verified, submitted, and awaiting final sign-off from the reviewer

A sentence in a chip defeats the point — a chip is a token, not a paragraph.

Every option

The whole surface of the component, one cell per value — including the precedence rules (avatar over leading-icon) and combinations a normal example never shows.

tone — all six

tone="neutral"

Neutral

tone="primary"

Primary

tone="success"

Success

tone="warning"

Warning

tone="danger"

Danger

tone="info"

Info

variant — soft · outline · solid

variant="soft"

Primary

variant="outline"

Primary

variant="solid"

Primary

size

size="sm"

Small

size="md" (default)

Medium

leading-icon

leading-icon="check-circle"

check-circle

leading-icon="pencil"

pencil

leading-icon="calendar"

calendar

leading-icon="star"

star

leading-icon="user"

user

avatar

avatar (image URL)

Assigned

avatar + leading-icon (avatar wins)

Assigned

avatar as a node — React-only; Razor avatar is always an image URL

Custom

removable — onRemove

removable="true"

Removable

removable="true" disabled="true"

Removable

removable="true" remove-label="Delete Alpha"

Alpha

clickable — onClick

clickable="true"

clickable="true" disabled="true"

clickable="true" removable="true" together

content edge cases

long label — wraps inside a constrained container

A very long chip label that needs to wrap or truncate

content set via inner markup — generic "Remove" aria-label

Node content

Attributes

Attribute	Type	Default	Description
(content)	`string`	—	The chip label (inner content).
tone	`neutral \| primary \| success \| warning \| danger \| info`	`neutral`	Colour tone — pick it for meaning.
variant	`soft \| outline \| solid`	`soft`	Colour treatment — tinted surface, tinted + coloured border, or filled pill.
size	`md \| sm`	`md`	Chip size.
leading-icon	`string`	—	Bootstrap Icons glyph shown before the label.
avatar	`string`	—	Leading avatar image URL.
removable	`bool`	`false`	When true, shows a dismiss ✕ (wire the click via `data-chip-remove`).
clickable	`bool`	`false`	Render the chip body as a button (React `onClick`) — a clickable filter chip.
remove-label	`string`	—	aria-label for the dismiss button (defaults to "Remove {label}").
label	`string`	—	Chip text (React label); inner content is used when absent.
disabled	`bool`	`false`	Render as unavailable.
class	`string`	—	Extra classes on the chip.

Playground

Tones

Variants

Leading icon

Removable

Sizes

When to use

Use it when

Reach for something else when

Best practices

Every option

tone — all six

variant — soft · outline · solid

size

leading-icon

avatar

removable — onRemove

clickable — onClick

content edge cases

Attributes

Related