Neo-Brutalist Angular Chip
Chip
A directive on <span> for compact labels, tags, and categories. Pairs with nbChipGroup for horizontal chip rows. Supports 10 tones and an optional leading icon via ng-content.
Preview
Usage
Import
import { NbChip, NbChipGroup } from '@ng-brutalism/ui';Template
<div nbChipGroup>
<span nbChip>Angular</span>
<span nbChip tone="mint">TypeScript</span>
<span nbChip tone="pink">RxJS</span>
<span nbChip tone="lavender">Signals</span>
</div>Tones
Tokens
With Icon
Pass an SVG URL to the icon input for a leading icon. It renders through nbIcon in mask mode, so it tints to the chip's foreground color. Use iconSize to scale it.
For full-color or labeled icons, project any element as content instead — the leading slot is only used when icon is set.
API
NbChip
| Input | Type | Default | Description |
|---|---|---|---|
| tone | 'default' | 'ink' | 'yellow' | 'pink' | 'mint' | 'lavender' | 'accent' | 'success' | 'warning' | 'danger' | 'default' | Background color tone. |
| padding | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Inner padding scale. |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'none' | Corner radius scale. |
| shadow | 'none' | 'sm' | 'default' | 'hard' | 'sm' | Drop shadow scale. |
| icon | string | — | URL of a leading SVG icon, tinted to the chip's foreground via nbIcon mask mode. |
| iconSize | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'sm' | Size of the icon input's icon. |
NbChipGroup
Wrapper directive with flex flex-wrap gap-2. No inputs — use Tailwind or inline styles to override spacing.
CSS tokens
| Token | Default | Description |
|---|---|---|
| --nb-chip-bg | var(--nb-surface) | Background color. |
| --nb-chip-fg | var(--nb-foreground) | Text and icon color. |
| --nb-chip-radius | 0px | Corner radius. |
| --nb-chip-shadow | 2px 2px 0 0 var(--nb-shadow) | Box shadow. |
| --nb-chip-icon-size | 0.75rem | Projected SVG size. |