Badge
Makes a component look like a badge.
import { Component } from '@angular/core';
import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
@Component({
  selector: 'spartan-badge-preview',
  standalone: true,
  imports: [HlmBadgeDirective],
  template: `
    <a target="_blank" href="https://github.com/goetzrobin/spartan" hlmBadge>This is madness. This is spartan.</a>
  `,
})
export class BadgePreviewComponent {}Installation
npx nx g @spartan-ng/cli:ui badge
ng g @spartan-ng/cli:ui badge
Usage
import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';<a target="_blank" href="https://github.com/goetzrobin/spartan" hlmBadge>This is madness. This is spartan.</a>Examples
Default
import { Component } from '@angular/core';
import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
@Component({
  selector: 'spartan-badge-preview',
  standalone: true,
  imports: [HlmBadgeDirective],
  template: `
    <a target="_blank" href="https://github.com/goetzrobin/spartan" hlmBadge>This is madness. This is spartan.</a>
  `,
})
export class BadgePreviewComponent {}Secondary
Secondary
import { Component } from '@angular/core';
import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
@Component({
  selector: 'spartan-badge-secondary',
  standalone: true,
  imports: [HlmBadgeDirective],
  template: ` <div hlmBadge variant="secondary">Secondary</div> `,
})
export class BadgeSecondaryExampleComponent {}Outline
Outline
import { Component } from '@angular/core';
import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
@Component({
  selector: 'spartan-badge-outline',
  standalone: true,
  imports: [HlmBadgeDirective],
  template: ` <div hlmBadge variant="outline">Outline</div> `,
})
export class BadgeOutlineExampleComponent {}Destructive
Destructive
import { Component } from '@angular/core';
import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
@Component({
  selector: 'spartan-badge-destructive',
  standalone: true,
  imports: [HlmBadgeDirective],
  template: ` <div hlmBadge variant='destructive'>Destructive</div> `,
})
export class BadgeDestructiveComponent {}