Back to componentszyra-chip
Chip
Compact interactive labels for filters, tags, and selections - supports dismissible and selectable modes.
Component preview
Explore the available states and the real library behavior for this component.
zyra-chip Playground
Control every input live and see the result instantly
Controls
size
label
boolean inputs
variant
Preview
Frontend
Generated Code
<zyra-chip>
Frontend
</zyra-chip>All Variants
default
success
warning
danger
info
purple
Sizes
Small
Medium
Large
Dismissible — click × to remove
Angular
TypeScript
SCSS
Signals
SSR
Selectable
default
success
warning
danger
info
purple
Real World Examples
Tech Stack Tags
Angular
TypeScript
Node.js
MongoDB
Docker
Filter Selection
All
Design
Development
Marketing
Status Labels
Deployed
Pending
Failed
Running
Copy-paste example
Drop this into your Angular standalone component and it works out of the box.
import { Component } from '@angular/core';
import { ZyraChip } from 'zyra-ng-ui';
@Component({
selector: 'app-demo',
standalone: true,
imports: [ZyraChip],
template: `
<zyra-chip variant="info" [dismissible]="true">
Angular
</zyra-chip>
`,
})
export class DemoComponent {}Variants
All the visual modes and states available for this component.
defaultNeutral chip for categories and plain tags
infoBlue tint for informational labels
successGreen for active or passing filter states
warningAmber for caution tags
dangerRed for error or blocking tags
API
All inputs and configuration options for zyra-chip.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'info' | 'success' | 'warning' | 'danger' | 'default' | Color and semantic meaning |
dismissible | boolean | false | Shows a x button to remove the chip |
selectable | boolean | false | Enables toggle-selection state |
selected | boolean | false | Current selected state (two-way bindable) |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Dismissible chips include a visually-hidden "Remove" label on the x button
- Selectable chips use aria-pressed to communicate toggle state
- Use a group element with role="group" and an aria-label when listing multiple chips