Web Components

shield-button

Dokumentation ueber einen zentralen Playground plus eigene Custom Stories fuer Varianten, Groessen, States, Accessibility und typische UI-Kontexte.

Default Story Playground

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

Custom Stories

Diese Bloecke sind frei gebaut und nicht an Storybook gebunden. Ideal fuer Guidelines und zusammengesetzte Beispiele.

HTMLAngular

Button Varianten Grid (HTML)

Web Components direkt im Astro-Markup eingebunden.

Primary

Secondary

Ghost

Code

<shield-button variant="primary" size="md">Primary</shield-button>
<shield-button variant="secondary" size="md">Secondary</shield-button>
<shield-button variant="ghost" size="md">Ghost</shield-button>

Button Varianten Grid (Angular Island)

Dasselbe Beispiel ueber eine Angular-Komponente in Astro (client:load).

Primary

Secondary

Ghost

Code

import { Component } from '@angular/core';
import { ShieldButton, ShieldButtonSize, ShieldButtonVariant } from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldButton],
  template: `
    <shield-button [variant]="Variant.PRIMARY" [size]="Size.MD">Primary</shield-button>
    <shield-button [variant]="Variant.SECONDARY" [size]="Size.MD">Secondary</shield-button>
    <shield-button [variant]="Variant.GHOST" [size]="Size.MD">Ghost</shield-button>
  `
})
export class AngularButtonVariantsDemoComponent {
  readonly Variant = ShieldButtonVariant;
  readonly Size = ShieldButtonSize;
}

HTMLAngular

Groessenvergleich (HTML)

Kleine, mittlere und grosse Buttons nebeneinander.

Small

Medium

Large

Code

<shield-button variant="primary" size="sm">Small</shield-button>
<shield-button variant="primary" size="md">Medium</shield-button>
<shield-button variant="primary" size="lg">Large</shield-button>

Groessenvergleich (Angular Island)

Dasselbe Beispiel ueber Angular in Astro.

Small

Medium

Large

Code

import { Component } from '@angular/core';
import {
  ShieldButton,
  ShieldButtonSize,
  ShieldButtonVariant
} from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldButton],
  template: `
    <shield-button [variant]="Variant.PRIMARY" [size]="Size.SM">Small</shield-button>
    <shield-button [variant]="Variant.PRIMARY" [size]="Size.MD">Medium</shield-button>
    <shield-button [variant]="Variant.PRIMARY" [size]="Size.LG">Large</shield-button>
  `
})
export class AngularButtonSizesDemoComponent {
  readonly Variant = ShieldButtonVariant;
  readonly Size = ShieldButtonSize;
}

HTMLAngular

States (HTML)

Default, Disabled und Loading-Text im Vergleich.

Default

Disabled

Saving...

Code

<shield-button variant="primary" size="md">Default</shield-button>
<shield-button variant="secondary" size="md" disabled>Disabled</shield-button>
<shield-button variant="primary" size="md" disabled>Saving...</shield-button>

States (Angular Island)

Dasselbe State-Setup in Angular.

Default

Disabled

Saving...

Code

import { Component } from '@angular/core';
import {
  ShieldButton,
  ShieldButtonSize,
  ShieldButtonVariant
} from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldButton],
  template: `
    <shield-button [variant]="Variant.PRIMARY" [size]="Size.MD">Default</shield-button>
    <shield-button [variant]="Variant.SECONDARY" [size]="Size.MD" [disabled]="true">Disabled</shield-button>
    <shield-button [variant]="Variant.PRIMARY" [size]="Size.MD" [disabled]="true">Saving...</shield-button>
  `
})
export class AngularButtonStatesDemoComponent {
  readonly Variant = ShieldButtonVariant;
  readonly Size = ShieldButtonSize;
}

HTMLAngular

Icon-only A11y (HTML)

Icon-only braucht immer s-aria-label.

Code

<shield-button variant="secondary" size="sm" s-aria-label="Dialog schliessen">
  <span aria-hidden="true">✕</span>
</shield-button>
<shield-button variant="secondary" size="sm" s-aria-label="Suche oeffnen">
  <span aria-hidden="true">🔍</span>
</shield-button>

Icon-only A11y (Angular Island)

Dasselbe a11y-Pattern in Angular.

Code

import { Component } from '@angular/core';
import {
  ShieldButton,
  ShieldButtonSize,
  ShieldButtonVariant
} from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldButton],
  template: `
    <shield-button [variant]="Variant.SECONDARY" [size]="Size.SM" sAriaLabel="Dialog schliessen">
      <span aria-hidden="true">✕</span>
    </shield-button>
    <shield-button [variant]="Variant.SECONDARY" [size]="Size.SM" sAriaLabel="Suche oeffnen">
      <span aria-hidden="true">🔍</span>
    </shield-button>
  `
})
export class AngularButtonIconA11yDemoComponent {
  readonly Variant = ShieldButtonVariant;
  readonly Size = ShieldButtonSize;
}

HTMLAngular

Footer Actions (HTML)

Klassische Formular-Buttons mit Hierarchie.

Zurueck

Weiter

Code

<shield-button variant="secondary" size="md">Zurueck</shield-button>
<shield-button variant="primary" size="md">Weiter</shield-button>

Footer Actions (Angular Island)

Dasselbe Layout als Angular-Implementierung.

Zurueck

Weiter

Code

import { Component } from '@angular/core';
import {
  ShieldButton,
  ShieldButtonSize,
  ShieldButtonVariant
} from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldButton],
  template: `
    <shield-button [variant]="Variant.SECONDARY" [size]="Size.MD">Zurueck</shield-button>
    <shield-button [variant]="Variant.PRIMARY" [size]="Size.MD">Weiter</shield-button>
  `
})
export class AngularButtonContextDemoComponent {
  readonly Variant = ShieldButtonVariant;
  readonly Size = ShieldButtonSize;
}

Auf dieser Seite