Chip

Compact label for status, tags, and metadata with sizes, colors, and variants.

Import

import { AvChipImports } from '@avesra/angular';

Anatomy

Import the Chip components and compose the parts with av-chip and av-chip-label.

The label input is automatically wrapped in av-chip-label.

<span av-chip label="Label text"></span>

Usage

DefaultAccentSuccessWarningDanger

import { Component } from '@angular/core';
import { AvChipImports } from '@avesra/angular';

@Component({
  selector: 'app-chip-basic-demo',
  imports: [AvChipImports],
  template: `<div class="flex flex-wrap items-center gap-3">
      <span av-chip label="Default"></span>
      <span av-chip color="accent" label="Accent"></span>
      <span av-chip color="success" label="Success"></span>
      <span av-chip color="warning" label="Warning"></span>
      <span av-chip color="danger" label="Danger"></span>
    </div>`,
})
export class ChipBasicDemo {}

Variants

lg

accent

default

success

warning

danger

primary

Label

secondary

Label

tertiary

Label

soft

Label

md

accent

default

success

warning

danger

primary

Label

secondary

Label

tertiary

Label

soft

Label

sm

accent

default

success

warning

danger

primary

Label

secondary

Label

tertiary

Label

soft

Label

import { Component } from '@angular/core';
import {
  AvChipImports,
  AvSeparatorImports,
} from '@avesra/angular';

@Component({
  selector: 'app-chip-variants-demo',
  imports: [AvChipImports, AvSeparatorImports],
  host: { class: 'block w-full min-w-0' },
  template: `<div class="w-full min-w-0 overflow-x-auto">
      <div class="flex w-max min-w-full flex-col gap-8">
        @for (size of sizes; track size; let last = $last) {
          <div class="flex flex-col gap-4">
            <h3 class="text-sm font-semibold text-muted capitalize">{{ size }}</h3>
            <div class="flex items-center gap-3">
              <div class="w-24 shrink-0"></div>
              @for (color of colors; track color) {
                <div class="flex w-[130px] shrink-0 items-center justify-center">
                  <span class="text-xs text-muted capitalize">{{ color }}</span>
                </div>
              }
            </div>
            <div class="flex flex-col gap-3">
              @for (variant of variants; track variant) {
                <div class="flex items-center gap-3">
                  <div class="w-24 shrink-0 text-sm text-muted capitalize">{{ variant }}</div>
                  @for (color of colors; track color) {
                    <div class="flex w-[130px] shrink-0 items-center justify-center">
                      <span av-chip [color]="color" [size]="size" [variant]="variant">
                        <svg class="size-3.5" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                          <circle
                            cx="8"
                            cy="8"
                            r="6"
                            stroke="currentColor"
                            stroke-dasharray="2 2"
                          />
                        </svg>
                        <span av-chip-label>Label</span>
                        <svg class="size-3.5" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                          <circle
                            cx="8"
                            cy="8"
                            r="6"
                            stroke="currentColor"
                            stroke-dasharray="2 2"
                          />
                        </svg>
                      </span>
                    </div>
                  }
                </div>
              }
            </div>
          </div>
          @if (!last) {
            <hr av-separator />
          }
        }
      </div>
    </div>`,
})
export class ChipVariantsDemo {
  readonly sizes: Array<'lg' | 'md' | 'sm'> = ['lg', 'md', 'sm'];
  readonly variants: Array<'primary' | 'secondary' | 'tertiary' | 'soft'> = [
    'primary',
    'secondary',
    'tertiary',
    'soft',
  ];
  readonly colors: Array<'accent' | 'default' | 'success' | 'warning' | 'danger'> = [
    'accent',
    'default',
    'success',
    'warning',
    'danger',
  ];
}

Statuses

Default

Active

Pending

Inactive

New Feature

Available

Beta

Deprecated

import { Component } from '@angular/core';
import { AvChipImports } from '@avesra/angular';
import { AppIconComponent } from '../../components/app-icon/app-icon.component';

@Component({
  selector: 'app-chip-statuses-demo',
  imports: [AvChipImports, AppIconComponent],
  template: `<div class="flex flex-col gap-4">
      <div class="flex flex-wrap items-center gap-3">
        <span av-chip variant="primary">
          <app-icon icon="solar:record-bold" size="6" />
          <span av-chip-label>Default</span>
        </span>
        <span av-chip color="success" variant="primary">
          <app-icon icon="solar:record-bold" size="6" />
          <span av-chip-label>Active</span>
        </span>
        <span av-chip color="warning" variant="primary">
          <app-icon icon="solar:record-bold" size="6" />
          <span av-chip-label>Pending</span>
        </span>
        <span av-chip color="danger" variant="primary">
          <app-icon icon="solar:record-bold" size="6" />
          <span av-chip-label>Inactive</span>
        </span>
      </div>

      <div class="flex flex-wrap items-center gap-3">
        <span av-chip>
          <app-icon icon="solar:info-circle-linear" size="12" />
          <span av-chip-label>New Feature</span>
        </span>
        <span av-chip color="success">
          <app-icon icon="solar:check-read-linear" size="12" />
          <span av-chip-label>Available</span>
        </span>
        <span av-chip color="warning">
          <app-icon icon="solar:danger-triangle-linear" size="12" />
          <span av-chip-label>Beta</span>
        </span>
        <span av-chip color="danger">
          <app-icon icon="solar:forbidden-circle-linear" size="12" />
          <span av-chip-label>Deprecated</span>
        </span>
      </div>
    </div>`,
})
export class ChipStatusesDemo {}

With Icons

Information

Completed

Pending

FailedLabel

import { Component } from '@angular/core';
import { AvChipImports } from '@avesra/angular';
import { AppIconComponent } from '../../components/app-icon/app-icon.component';

@Component({
  selector: 'app-chip-with-icon-demo',
  imports: [AvChipImports, AppIconComponent],
  template: `<div class="flex flex-wrap items-center gap-3">
      <span av-chip>
        <app-icon icon="solar:record-bold" size="6" />
        <span av-chip-label>Information</span>
      </span>
      <span av-chip color="success">
        <app-icon icon="solar:check-circle-bold" size="12" />
        <span av-chip-label>Completed</span>
      </span>
      <span av-chip color="warning">
        <app-icon icon="solar:clock-circle-linear" size="12" />
        <span av-chip-label>Pending</span>
      </span>
      <span av-chip color="danger">
        <app-icon icon="solar:close-linear" size="12" />
        <span av-chip-label>Failed</span>
      </span>
      <span av-chip color="accent">
        <span av-chip-label>Label</span>
        <app-icon icon="solar:alt-arrow-down-linear" size="12" />
      </span>
    </div>`,
})
export class ChipWithIconDemo {}

Styling

CSS Classes

Avesra uses BEM-style classes for predictable customization.

.av-chip — Base chip element
.av-chip--accent — Color modifiers (accent, default, success, warning, danger)
.av-chip--sm — Size modifiers (sm, md, lg)
.av-chip--primary — Variant modifiers (primary, secondary, tertiary, soft)
.av-chip__label — Chip label content

API

Prop	Type	Default	Description
`color`	`'accent' \| 'default' \| 'success' \| 'warning' \| 'danger'`	`'default'`	Chip color.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Chip size.
`variant`	`'primary' \| 'secondary' \| 'tertiary' \| 'soft'`	`'secondary'`	Visual style variant.
`label`	`string \| number`	—	Optional label text shorthand instead of projected content.