---
name: Button
description: Onesown Blazor Komponente Button (Common). Verwende diesen Skill wenn du die Button-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# Button

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Common  
**Basisklasse:** `FormControlBase`  

Vielseitiger Button mit Text, Icon, Lade-Spinner, Farbpalette und konfigurierbarem Radius. Kann rein per Text, per Icon, als Text+Icon-Kombination oder mit beliebigem ChildContent belegt werden. Farbe und Form werden über OoColorPalette-Token gesteuert; appweite Defaults lassen sich via CascadingValue<OoDefaults> im Root-Layout vorgeben.

**Live-Demo:** https://components.schini.com/demo/button  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Text`` | ``string`` |  | Beschriftungstext des Buttons. Wird links vom Icon angezeigt, wenn beide gesetzt sind. |
| ``Icon`` | ``string`` |  | Name des Material-Symbols (z. B. "save", "delete", "edit"). Wird als Icon neben oder statt Text angezeigt. |
| ``OnClick`` | ``EventCallback<MouseEventArgs>`` |  | Wird ausgelöst wenn der Nutzer auf den Button klickt. Bei Disabled=true oder IsBusy=true wird kein Event gefeuert. |
| ``Disabled`` | ``bool`` |  | Deaktiviert den Button: kein Klick, ausgegraut, ARIA-Attribut disabled gesetzt. Standard: false. |
| ``IsBusy`` | ``bool`` |  | Zeigt einen Lade-Spinner und sperrt den Button für weitere Klicks, solange true. Geeignet für asynchrone Aktionen. |
| ``Type`` | ``string`` | ``"button"`` | HTML-Button-Typ. Mögliche Werte: "button" (Standard), "submit" (Formular absenden), "reset" (Formular zurücksetzen). |
| ``Title`` | ``string`` |  | HTML-Title-Attribut – erscheint als nativer Browser-Tooltip beim Hover. |
| ``ButtonStyle`` | ``OoButtonStyle`` |  | Farb- und Stil-Token für den Button. Wert aus OoColorPalette (z. B. OoColorPalette.Primary, OoColorPalette.Danger.Light.Outline). Standard: OoColorPalette.Neutral (wenn kein Defaults gesetzt). |
| ``Radius`` | ``string`` |  | Border-Radius des Buttons. OoRadius-Konstanten (OoRadius.Sm, OoRadius.Lg, OoRadius.Full) oder beliebiger CSS-Wert (z. B. "8px"). Standard: OoRadius.Sm. |
| ``ChildContent`` | ``RenderFragment`` |  | Beliebiges Markup als Button-Inhalt – ersetzt Text und Icon, wenn gesetzt. |
| ``Shadow`` | ``bool?`` |  | Simuliert durch einen Inset-Box-Shadow einen dauerhaft gedrückten Zustand. Nützlich für Toggle-Szenarien. |

## Geerbte Parameter (FormControlBase)

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` | ``OoSize.Md`` | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |
| ``Id`` | ``string`` | ``Generator.GenerateRandomHtmlTagID()`` | Eindeutige HTML-ID des Input-Elements. Wird automatisch generiert und kann überschrieben werden (z. B. für Labels mit for-Attribut). |
| ``ShowLabel`` | ``bool`` | ``true`` | Blendet das Label über dem Eingabefeld ein oder aus. Standard: true. |
| ``IsFloatingLabel`` | ``bool`` | ``true`` | Aktiviert das schwebende Label (Floating Label), das beim Fokus oder bei Eingabe nach oben animiert. Standard: true. |
| ``Label`` | ``string`` |  | Beschriftung des Eingabefelds. Wird auch als Accessible-Name für Screenreader verwendet. |
| ``Placeholder`` | ``string`` | ``" "`` | Platzhaltertext im leeren Eingabefeld. Standard: Leerzeichen (verhindert Floating-Label-Sprung in Chrome). |
| ``AutoSaveCallback`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst und signalisiert der Seite, dass gespeichert werden soll. Kombinierbar mit TriggerAutoSaveCallbackOnlyIfValid. |
| ``TriggerAutoSaveCallbackOnlyIfValid`` | ``bool`` | ``true`` | Steuert ob AutoSaveCallback nur bei gültigem Wert ausgelöst wird. Standard: true. |
| ``AfterValueChanged`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst, unabhängig von der Gültigkeit des Werts. Geeignet für Live-Vorschau oder Seiteneffekte. |
| ``ShowValidationTooltip`` | ``bool`` | ``false`` | Zeigt Validierungsmeldungen als Tooltip neben dem Feld statt als Text darunter. Standard: false. |

## Hinweise

- Immer @bind-Value für Two-Way-Binding verwenden
- Für Formular-Validierung ValueExpression="() => _model.Property" setzen
- Komponente muss innerhalb eines &lt;Form&gt;- oder &lt;EditForm&gt;-Containers liegen, damit der EditContext greift
- AutoSaveCallback wird nach jeder gültigen Änderung ausgelöst, wenn TriggerAutoSaveCallbackOnlyIfValid=true (Standard)
- AfterValueChanged wird nach jeder Änderung ausgelöst, unabhängig von der Gültigkeit
- ShowValidationTooltip=true zeigt Validierungsmeldungen als Tooltip statt unter dem Feld
- Für einfache Aktionen: Text="Speichern" ButtonStyle="OoColorPalette.Primary"
- Für Icons: Icon="delete" \u2013 zeigt das Material-Symbol ohne Text
- Text + Icon kombinierbar: Text="Löschen" Icon="delete"
- Lade-Zustand: IsBusy="true" zeigt Spinner und sperrt den Button
- Submit-Buttons: Type="submit" innerhalb eines Form-Containers verwenden
- Eigenes Markup: ChildContent statt Text/Icon für komplexen Button-Inhalt
- Shadow="true" simuliert einen dauerhaft gedrückten Zustand (z. B. aktiver Toggle)