Chip

A compact interactive tag/chip with selection, dismissal, hover animations, and colour variants.

Import

import { Chip } from '@synapse-ui/chip';

Basic Usage

<synapse-chip variant="accent" [selected]="true">React</synapse-chip> <synapse-chip [dismissible]="true" (dismissed)="onRemove()">TypeScript</synapse-chip>

Inputs

Input	Type	Default	Description
variant	'default' | 'accent' | 'success' | 'warning' | 'error'	'default'	Colour theme
selected	boolean	false	Fills chip with accent colour
dismissible	boolean	false	Shows a × dismiss button
disabled	boolean	false	Disables click and dismiss

Outputs

Output	Payload	Description
dismissed	void	Emitted when the × button is clicked
selectedChange	boolean	Emitted with the new selection state