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 {}