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

<div class="docs-custom-variant-grid">
  <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>
</div>

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 } from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldButton],
  template: `
    <div class="docs-custom-variant-grid">
      <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>
    </div>
  `
})
export class AngularButtonVariantsDemoComponent {}

HTMLAngular

Groessenvergleich (HTML)

Kleine, mittlere und grosse Buttons nebeneinander.

Small

Medium

Large

Code

<div class="docs-custom-variant-grid">
  <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>
</div>

Groessenvergleich (Angular Island)

Dasselbe Beispiel ueber Angular in Astro.

Small

Medium

Large

Code

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

@Component({
  standalone: true,
  imports: [ShieldButton],
  template: `
    <div class="docs-custom-variant-grid">
      <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>
    </div>
  `
})
export class AngularButtonSizesDemoComponent {}

HTMLAngular

States (HTML)

Default, Disabled und Loading-Text im Vergleich.

Default

Disabled

Saving...

Code

<div class="docs-custom-variant-grid">
  <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>
</div>

States (Angular Island)

Dasselbe State-Setup in Angular.

Default

Disabled

Saving...

Code

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

@Component({
  standalone: true,
  imports: [ShieldButton],
  template: `
    <div class="docs-custom-variant-grid">
      <shield-button variant="primary" size="md">Default</shield-button>
      <shield-button variant="secondary" size="md" [disabled]="true">Disabled</shield-button>
      <shield-button variant="primary" size="md" [disabled]="true">Saving...</shield-button>
    </div>
  `
})
export class AngularButtonStatesDemoComponent {}

HTMLAngular

Icon-only A11y (HTML)

Icon-only braucht immer s-aria-label.

Code

<div class="docs-custom-variant-grid">
  <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>
</div>

Icon-only A11y (Angular Island)

Dasselbe a11y-Pattern in Angular.

Code

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

@Component({
  standalone: true,
  imports: [ShieldButton],
  template: `
    <div class="docs-custom-variant-grid">
      <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>
    </div>
  `
})
export class AngularButtonIconA11yDemoComponent {}

HTMLAngular

Footer Actions (HTML)

Klassische Formular-Buttons mit Hierarchie.

Zurueck

Weiter

Code

<div class="docs-action-row">
  <shield-button variant="secondary" size="md">Zurueck</shield-button>
  <shield-button variant="primary" size="md">Weiter</shield-button>
</div>

Footer Actions (Angular Island)

Dasselbe Layout als Angular-Implementierung.

Zurueck

Weiter

Code

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

@Component({
  standalone: true,
  imports: [ShieldButton],
  template: `
    <div class="docs-action-row">
      <shield-button variant="secondary" size="md">Zurueck</shield-button>
      <shield-button variant="primary" size="md">Weiter</shield-button>
    </div>
  `
})
export class AngularButtonContextDemoComponent {}