Chip

Overview

Compact token for issue labels, free-form tags, applied filters, selected entities, and removable or toggleable metadata.

Use Chip mode="display" for issue labels and tags; use Badge for attached counts, statuses, and compact annotations.

<script lang="ts">
  import Chip from '@lostgradient/cinder/chip';
</script>

<Chip label="frontend" mode="display" variant="info" />

Live preview

Use when

Representing issue labels, free-form tags, applied filters, selected entities, or other metadata tokens.
Offering a small toggleable option inside a group of choices.

Avoid when

Showing a numeric count, short status, or compact category annotation next to another element — use badge instead.
Picking one of a small fixed set — use segmented-control instead.

Disabled toggle and disabled removable chip.

Display-mode chips used as issue labels and free-form metadata tags.

Display, toggle, and removable chip modes.

All six semantic variant styles in display mode.