Web Components

shield-badge

Badge-Komponente fuer Labels, Tags und Statusauszeichnungen.

Default Story Playground

Eingebettete Default-Story mit Storybook-Controls direkt in der Doku.

Custom Stories

Freie Doku-Beispiele mit demselben HTML und Angular Muster wie bei anderen Komponenten.

HTMLAngular

Badge Varianten (HTML)

Direktes Web-Component-Markup.

Code

<shield-badge label="primary" variant="primary"></shield-badge>
<shield-badge label="secondary" variant="secondary"></shield-badge>

Badge Varianten (Angular Island)

Varianten aus den exportierten Typen/Konstanten von @shield/angular.

Code

import { Component } from '@angular/core';
import { ShieldBadge, ShieldBadgeVariant } from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldBadge],
  template: `
    <shield-badge [variant]="Variant.PRIMARY" label="primary"></shield-badge>
    <shield-badge [variant]="Variant.SECONDARY" label="secondary"></shield-badge>
  `
})
export class AngularBadgeVariantsDemoComponent {
  readonly Variant = ShieldBadgeVariant;
}

HTMLAngular

Status Labels (HTML)

Typische Statuskennzeichnung in Listen und Tabellen.

Code

<shield-badge label="Live" variant="primary"></shield-badge>
<shield-badge label="Draft" variant="secondary"></shield-badge>
<shield-badge label="Archived" variant="secondary"></shield-badge>

Status Labels (Angular Island)

Dasselbe Set als Angular-Implementierung.

Code

import { Component } from '@angular/core';
import { ShieldBadge, ShieldBadgeVariant } from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldBadge],
  template: `
    <shield-badge [variant]="Variant.PRIMARY" label="Live"></shield-badge>
    <shield-badge [variant]="Variant.SECONDARY" label="Draft"></shield-badge>
    <shield-badge [variant]="Variant.SECONDARY" label="Archived"></shield-badge>
  `
})
export class AngularBadgeStatusDemoComponent {
  readonly Variant = ShieldBadgeVariant;
}

HTMLAngular

Meta Infos (HTML)

Badges fuer Versionen, Release-Flags und Kontextlabels.

Code

<shield-badge label="v2.3.1" variant="primary"></shield-badge>
<shield-badge label="Beta" variant="secondary"></shield-badge>
<shield-badge label="EU Region" variant="secondary"></shield-badge>

Meta Infos (Angular Island)

Derselbe Einsatz in einer Angular-Island.

Code

import { Component } from '@angular/core';
import { ShieldBadge, ShieldBadgeVariant } from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldBadge],
  template: `
    <shield-badge [variant]="Variant.PRIMARY" label="v2.3.1"></shield-badge>
    <shield-badge [variant]="Variant.SECONDARY" label="Beta"></shield-badge>
    <shield-badge [variant]="Variant.SECONDARY" label="EU Region"></shield-badge>
  `
})
export class AngularBadgeMetaDemoComponent {
  readonly Variant = ShieldBadgeVariant;
}

HTMLAngular

Grouping (HTML)

Mehrere Fachbereiche/Kategorien kompakt darstellen.

Code

<shield-badge label="Security" variant="primary"></shield-badge>
<shield-badge label="Payments" variant="secondary"></shield-badge>
<shield-badge label="Monitoring" variant="secondary"></shield-badge>
<shield-badge label="Platform" variant="secondary"></shield-badge>

Grouping (Angular Island)

Dasselbe Grouping als Angular-Variante.

Code

import { Component } from '@angular/core';
import { ShieldBadge, ShieldBadgeVariant } from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldBadge],
  template: `
    <shield-badge [variant]="Variant.PRIMARY" label="Security"></shield-badge>
    <shield-badge [variant]="Variant.SECONDARY" label="Payments"></shield-badge>
    <shield-badge [variant]="Variant.SECONDARY" label="Monitoring"></shield-badge>
    <shield-badge [variant]="Variant.SECONDARY" label="Platform"></shield-badge>
  `
})
export class AngularBadgeGroupingDemoComponent {
  readonly Variant = ShieldBadgeVariant;
}

Verwendung

Kurze Texte fuer Status und Kategorien einsetzen.
Nicht als interaktive Steuerung verwenden.
Farben immer mit semantischer Bedeutung konsistent halten.