AngularLynx

    Badge

    Label something with a small pill, such as a status, a count or a category.

    ui-badgesrc/app/app.ts

    Installation

    npx @blotch/dolan add badge
    import { UiBadge } from '../components/ui/badge';

    Badge imports class-variance-authority (see Installation).

    Usage

    import { Component } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
import { UiBadge } from '../components/ui/badge';

@Component({
  selector: 'app-inbox-row',
  imports: [LYNX_ELEMENTS, UiBadge],
  template: `
    <view class="flex flex-row items-center gap-2">
      <text class="text-sm text-foreground">Notifications</text>
      <ui-badge variant="destructive">3</ui-badge>
    </view>
  `,
})
export class InboxRow {}
    • Put plain text inside. The badge wraps its content in a <text> element.
    • The badge hugs its text instead of stretching to fill its parent.
    • It pops in with a short spring animation when it first renders.

    Variants

    <ui-badge>Default</ui-badge>
<ui-badge variant="secondary">Secondary</ui-badge>
<ui-badge variant="destructive">Destructive</ui-badge>
<ui-badge variant="outline">Outline</ui-badge>

    Without the animation

    Set animated to false for a badge that appears without popping in, for example in a long list.

    <ui-badge [animated]="false">Archived</ui-badge>

    API

    UiBadge

    InputTypeDefaultDescription
    variant'default' | 'secondary' | 'destructive' | 'outline''default'Visual style.
    animatedbooleantruePop in with a spring animation on first render.
    classstring''Extra Tailwind classes for the pill.

    No outputs.

    The file also exports badgeVariants, the class-variance-authority function that returns the pill's classes for a variant, and the BadgeVariant type.

    • Button: a tappable control in the same styles
    • Avatar: pair a badge with a user's photo
    • Theming: change the colors the variants use