Chip
Free7 semantic variants × 3 visual styles. Supports avatar, icon, selectable and removable modes.
</>sv-chip chiptaglabel
import { SvChipComponent } from '@styloviz/forms';Demo & usage
Basic usage
Usage example — open the gallery for the full interactive demo.
An interactive demo for this component lives in the gallery.
Open live demoMore examples
Avatar & selectable
example.htmlAngular
1 lines
<sv-chip label="Ada Lovelace" avatarInitials="AL" [selectable]="true" [(selected)]="picked" />
Say what the chip is for
example.htmlAngular
2 lines
<sv-chip chipRole="status" categoryLabel="Status" label="Overdue" variant="danger" /> <sv-chip chipRole="action" label="Add label" icon="plus" (activated)="addLabel()" />
Styles
example.htmlAngular
3 lines
<sv-chip label="Solid" variant="success" /> <sv-chip label="Soft" variant="warning" chipStyle="soft" /> <sv-chip label="Outline" variant="danger" chipStyle="outline" />
When to use
- Displaying compact, discrete metadata: tags, categories, statuses, filters.
- Building removable filter bars or selectable token lists.
- For free-text entry of many tags, compose with Tag Input instead.
Async states
None — this component has nothing to load, so it has no loading, empty or error state to drive.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | '' | Label text displayed in the chip. |
| variant | ChipVariant | 'default' | Color variant. |
| chipStyle | ChipStyle | 'soft' | Visual style. |
| size | ChipSize | 'md' | Size. |
| ariaLabel | string | '' | Accessible name — required for icon/avatar-only chips with no `label`. |
| chipRole | ChipRole | 'auto' | What this chip is being used as. |
| categoryLabel | string | '' | A category announced before the label, e.g. `'Status'` → "Status: Overdue". OFF BY DEFAULT, AND THAT IS NOT TIMIDITY. Prefixing every non-interactive chip would turn a skills list into "Status: Angular, Status: TypeScript". The component cannot know which plain chips are badges and which are decoration — the host can, and this is how it says so. Rendered as `sr-only` text rather than `aria-label` for chips with no ARIA role, because `aria-label` on a bare `<span>` is not reliably announced. Roled chips fold it into their name instead. |
| icon | string | '' | Name of an icon in `@styloviz/icons`, e.g. `'star'`. This used to be a raw `<path d="…">` string. That put SVG geometry in every consumer's config and skipped the library's sizing, stroke and dark-mode handling — pass a name instead. |
| avatarSrc | string | '' | Avatar image URL for a leading avatar. Takes precedence over `icon`. |
| avatarInitials | string | '' | Avatar initials (fallback when avatarSrc fails). |
| selected | boolean (two-way) | false | Selected/active state. Two-way bindable with `[(selected)]`; also works as a controlled `[selected]` input or uncontrolled (toggled on click). |
| selectable | boolean | false | Allow toggling the selected state on click. |
| removable | boolean | false | Show a dismiss (×) button to remove the chip. |
| disabled | boolean | false | Disable interaction. |
Outputs
| Event | Payload type | Description |
|---|---|---|
| removed | void | Emitted when the dismiss button is clicked. |
| activated | void | The chip was activated — click, `Enter` or `Space`. Only for `chipRole="action"`. A SELECTABLE CHIP HAS `selectedChange`; AN ACTION CHIP HAD NOTHING. The only way to react to a chip click was to make it selectable and watch the toggle, which is why "Add label" chips in this kit were checkboxes. |
| selectedChange | boolean | Emits the new `selected` whenever it changes — the output half of `[(selected)]`. |
Customization & theming
- Seven semantic `variant`s across `filled`, `soft` and `outline` styles, in three `size`s.
- Add a leading `icon` (an icon-library name), `avatarSrc` or `avatarInitials`; enable `selectable` and/or `removable`.
- Bind selection with `[(selected)]` (two-way), `[selected]` (controlled) or leave it uncontrolled; listen to `(removed)`.
Best practices
- Do: Map `variant` to meaning (success/warning/danger) consistently across the app.
- Do: Give removable chips a clear context so the remove action is unambiguous.
- Don't: Don't cram long sentences into a chip — keep labels to one or two words.
Accessibility
- Selectable chips use `role="checkbox"` with `aria-checked`, are in the tab order, and toggle with Space/Enter — the `selected` model keeps the visual and bound state in sync.
- Removable chips expose a labelled remove button (disabled when the chip is disabled).
- Disabled chips set `aria-disabled` and leave the tab order; provide `ariaLabel` for icon/avatar-only chips so they have an accessible name.
- `chipRole` names the job instead of a styling flag: `status` (no role, ignores `selectable`), `filter` (`role="checkbox"`), `token` (inert body, labelled remove button) and `action` (`role="button"`, Space/Enter, emits `activated`, never carries selection). `auto` (default) resolves as before: selectable → filter, removable → token, else status.
- `categoryLabel` prefixes the announced name ("Status: Overdue", "Filter: Frontend") — as sr-only text on role-less chips, folded into `aria-label` on roled ones; an explicit `ariaLabel` is never prefixed.
Feedback on Chip
Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.