<tyro-ui-chip>

Chip

Semantic badge component with 5 variants, 2 sizes, optional icon and optional remove button. Content is projected via ng-content.

Variants

All variants (md)

Default

Accent

Success

Warning

Danger

Sizes

sm vs md

With icon

Remix Icon class via [icon]

Active

Pending

Blocked

Admin

Removable

[removable] + (removed) event

Tag 1

Tag 2

Active

Inputs

Property	Type	Default	Description
`[variant]`	`'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'`	`'default'`	Semantic color of the chip
`[size]`	`'sm' \| 'md'`	`'md'`	Size of the chip
`[icon]`	`string`	`-`	Remix Icon class displayed to the left of the text
`[removable]`	`boolean`	`false`	Shows a × button to remove the chip

Outputs

Event	Payload	Description
`(removed)`	`void`	Emitted when the user clicks the remove button

Variant semantics

Variant	Usage
default	Neutral state, generic tags
accent	Role, category, highlighted value
success	Active, validated, online state
warning	Warning, pending state
danger	Error, inactive, blocked state

Usage

<tyro-ui-chip variant="success" icon="ri-check-line">
  Active
</tyro-ui-chip>

<tyro-ui-chip variant="danger" [removable]="true" (removed)="onRemove()">
  Tag
</tyro-ui-chip>