Buttons
Buttons allow the user to take actions or make choices
ICF Button Styles
Diese Buttons entsprechen dem Design auf icf-muenchen.de
Varianten wie auf ICF München
Dunkelgraue Buttons sind der Standard - Orange nur als Akzent
Button Größen
Verschiedene Button-Größen in Dunkelgrau (ICF Standard)
Standard DaisyUI Farben
Standard DaisyUI Button-Farben (für Referenz)
Button Stile
Verschiedene Button-Stile - minimalistisch wie auf ICF München
Buttons mit Icons
Buttons mit Icons - dunkelgrau als Standard
Icon Buttons
Nur-Icon Buttons in verschiedenen Stilen
Button Zustände
Active und Disabled Zustände
Loading Buttons
Buttons mit Loading-Spinner
Button Breiten
Wide und Block Buttons
Button Gruppen
Gruppierte Buttons
Responsive Button
Dieser Button ändert seine Größe je nach Bildschirmbreite
🎯 Wiederverwendbare Button-Komponente
Die <app-button> Komponente kann in der gesamten App verwendet werden. Sie ist voll konfigurierbar und unterstützt alle ICF-Button-Stile.
Button-Typen
<app-button type="primary">Primary</app-button>
<app-button type="secondary">Secondary</app-button>
<app-button type="accent">Accent</app-button>
<app-button type="ghost">Ghost</app-button>
<app-button type="link">Link</app-button> Button-Größen
<app-button size="xs">X-Small</app-button>
<app-button size="sm">Small</app-button>
<app-button size="md">Medium</app-button>
<app-button size="lg">Large</app-button>
<app-button size="xl">X-Large</app-button> Buttons mit Icons
<app-button type="primary" [iconLeft]="heartIcon">Mit Icon links</app-button>
<app-button type="secondary" [iconRight]="arrowRightIcon">Weiter</app-button> // In der TypeScript-Datei:
heartIcon = 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682...';
arrowRightIcon = 'M9 5l7 7-7 7'; Button-States
<app-button type="primary">Normal</app-button>
<app-button type="primary" [disabled]="true">Disabled</app-button>
<app-button type="primary" [loading]="isLoading">Loading...</app-button> Button-Breiten
<app-button width="normal">Normal Width</app-button>
<app-button width="wide">Wide Button</app-button>
<app-button width="block">Block Button</app-button> Button-Gruppe
<div class="flex gap-4"> <app-button type="ghost">Abbrechen</app-button> <app-button type="secondary">Speichern</app-button> <app-button type="accent">Veröffentlichen</app-button>
</div> 📋 Konfigurationsoptionen
| Property | Typ | Standard | Beschreibung |
|---|---|---|---|
type | 'primary' | 'secondary' | 'accent' | 'ghost' | 'link' | 'primary' | Button-Typ (bestimmt das Styling) |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Button-Größe |
width | 'normal' | 'wide' | 'block' | 'normal' | Button-Breite |
disabled | boolean | false | Button deaktivieren |
loading | boolean | false | Loading-State (zeigt Spinner) |
iconLeft | string | - | SVG-Path für Icon links |
iconRight | string | - | SVG-Path für Icon rechts |
ariaLabel | string | - | Accessibility Label |
buttonType | 'button' | 'submit' | 'reset' | 'button' | HTML Button-Typ |
Events
// clicked - Wird ausgelöst, wenn der Button geklickt wird <app-button (clicked)="handleClick($event)"> Click Me
</app-button> // In der TypeScript-Datei:
handleClick(event: MouseEvent): void { console.log('Button clicked!', event);
}