@synapse-ui/chip

Accessible Angular chip/tag component with five color variants, toggleable selected state, and an optional dismiss button.

Installation

npm install @synapse-ui/chip

Usage

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

@Component({
  imports: [Chip],
  template: `
    <synapse-chip variant="accent" [selected]="active" (selectedChange)="active = $event"> TypeScript </synapse-chip>
    <synapse-chip [dismissible]="true" (dismissed)="remove()"> Removable tag </synapse-chip>
  `,
})
export class MyComponent {
  active = false;
  remove() {
    /* ... */
  }
}

Inputs

| Input | Type | Default | Description | | ------------- | ------------------------------------------------------------ | ----------- | ------------------------- | | variant | 'default' \| 'accent' \| 'success' \| 'warning' \| 'error' | 'default' | Color variant | | selected | boolean | false | Toggleable selected state | | dismissible | boolean | false | Shows a × remove button | | disabled | boolean | false | Prevents interaction |

Outputs

| Output | Payload | Description | | ---------------- | --------- | ------------------------------------------ | | selectedChange | boolean | Emitted when the chip is clicked | | dismissed | void | Emitted when the dismiss button is clicked |

Running unit tests

Run nx test chip to execute the unit tests.