# Button-Komponente

Buttons dienen vor allem dazu, Aktionen auszuführen, wie z. B. das Senden einer E-Mail, das Teilen eines Dokuments oder das Liken eines Kommentars.

## Verwendung {#usage}

Importieren Sie die Komponente nach Bedarf:

```js
import 'mdui/components/button.js';
```

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

```ts
import type { Button } from 'mdui/components/button.js';
```

Beispiel:

```html
<mdui-button>Button</mdui-button>
```

## Beispiele {#examples}

### Form {#example-variant}

Mit dem Attribut `variant` bestimmen Sie die Form des Buttons.

```html
<mdui-button variant="elevated">Elevated</mdui-button>
<mdui-button variant="filled">Filled</mdui-button>
<mdui-button variant="tonal">Tonal</mdui-button>
<mdui-button variant="outlined">Outlined</mdui-button>
<mdui-button variant="text">Text</mdui-button>
```

### Volle Breite {#example-full-width}

Mit dem Attribut `full-width` nimmt der Button die volle Breite des übergeordneten Elements ein.

```html
<mdui-button full-width>Button</mdui-button>
```

### Symbol {#example-icon}

Setzen Sie die Attribute `icon` und `end-icon`, um links bzw. rechts vom Button ein Material Icons-Symbol hinzuzufügen. Sie können auch über die Slots `icon` und `end-icon` Elemente hinzufügen.

```html
<mdui-button icon="search" end-icon="arrow_forward">Icon</mdui-button>
<mdui-button>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-button>
```

### Link {#example-link}

Mit dem Attribut `href` verwandeln Sie den Button in einen Link. Sie können dann auch die Attribute `download`, `target` und `rel` verwenden.

```html
<mdui-button href="https://www.mdui.org" target="_blank">Link</mdui-button>
```

### Deaktivierter und Ladezustand {#example-disabled}

Mit dem Attribut `disabled` wird der Button deaktiviert. Mit dem Attribut `loading` wird ein Ladezustand angezeigt.

```html
<mdui-button disabled>Deaktiviert</mdui-button>
<mdui-button loading>Laden</mdui-button>
<mdui-button loading disabled>Laden & Deaktiviert</mdui-button>
```

## mdui-button API

### Eigenschaften

<table>
<thead>
  <tr>
    <th>Attribut</th>
    <th>Property</th>
    <th>Reflect</th>
    <th>Typ</th>
    <th>Standard</th>
    <th>Beschreibung</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>variant</td>
    <td>variant</td>
    <td>true</td>
    <td>&#39;elevated&#39; | &#39;filled&#39; | &#39;tonal&#39; | &#39;outlined&#39; | &#39;text&#39;</td>
    <td>'filled'</td>
    <td><p>Definiert die Button-Variante. Mögliche Werte:</p>
<ul>
<li><code>elevated</code>: Ein Button mit einem Schatten für visuelle Betonung.</li>
<li><code>filled</code>: Wird für endgültige Aktionen wie &#39;Speichern&#39; oder &#39;Bestätigen&#39; verwendet.</li>
<li><code>tonal</code>: Eine Zwischenform aus <code>filled</code> und <code>outlined</code> und eignet sich gut für Aktionen mittlerer bis hoher Priorität.</li>
<li><code>outlined</code>: Ein umrandeter Button für Aktionen mittlerer Priorität und sekundäre Aktionen.</li>
<li><code>text</code>: Ein Text-Button für Aktionen mit niedriger Priorität.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>full-width</td>
    <td>fullWidth</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Wenn gesetzt, füllt der Button die gesamte Breite seines Containers aus.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td>icon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Legt den Namen des Material Icons links fest. Alternativ können Sie <code>slot=&quot;icon&quot;</code> verwenden.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td>endIcon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Legt den Namen des Material Icons rechts fest. Alternativ können Sie <code>slot=&quot;end-icon&quot;</code> verwenden.</p>
</td>
  </tr>
  <tr>
    <td>href</td>
    <td>href</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Die URL für den Link. Wenn gesetzt, wird die Komponente als <code>&lt;a&gt;</code>-Element gerendert und unterstützt Link-bezogene Attribute.</p>
</td>
  </tr>
  <tr>
    <td>download</td>
    <td>download</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Lädt die verlinkte URL herunter.</p>
<p><strong>Hinweis</strong>: Nur verfügbar, wenn <code>href</code> angegeben ist.</p>
</td>
  </tr>
  <tr>
    <td>target</td>
    <td>target</td>
    <td>true</td>
    <td>&#39;_blank&#39; | &#39;_parent&#39; | &#39;_self&#39; | &#39;_top&#39;</td>
    <td></td>
    <td><p>Legt fest, wo die verlinkte URL geöffnet wird. Mögliche Werte:</p>
<ul>
<li><code>_blank</code>: Öffnet in einem neuen Tab oder Fenster.</li>
<li><code>_parent</code>: Öffnet im übergeordneten Browsing-Kontext oder <code>_self</code>, wenn kein übergeordneter Kontext vorhanden ist.</li>
<li><code>_self</code>: Öffnet im aktuellen Browsing-Kontext (Standard).</li>
<li><code>_top</code>: Öffnet im obersten Browsing-Kontext oder <code>_self</code>, wenn kein übergeordneter Kontext vorhanden ist.</li>
</ul>
<p><strong>Hinweis</strong>: Nur verfügbar, wenn <code>href</code> angegeben ist.</p>
</td>
  </tr>
  <tr>
    <td>rel</td>
    <td>rel</td>
    <td>true</td>
    <td>&#39;alternate&#39; | &#39;author&#39; | &#39;bookmark&#39; | &#39;external&#39; | &#39;help&#39; | &#39;license&#39; | &#39;me&#39; | &#39;next&#39; | &#39;nofollow&#39; | &#39;noreferrer&#39; | &#39;opener&#39; | &#39;prev&#39; | &#39;search&#39; | &#39;tag&#39;</td>
    <td></td>
    <td><p>Gibt die Beziehung der verlinkten URL als durch Leerzeichen getrennte Link-Typen an. Mögliche Werte:</p>
<ul>
<li><code>alternate</code>: Eine alternative Version des aktuellen Dokuments.</li>
<li><code>author</code>: Der Autor des aktuellen Dokuments oder Artikels.</li>
<li><code>bookmark</code>: Der Permalink des übergeordneten Abschnitts.</li>
<li><code>external</code>: Das referenzierte Dokument ist nicht Teil derselben Website wie das aktuelle Dokument.</li>
<li><code>help</code>: Ein Link zu kontextsensitiver Hilfe.</li>
<li><code>license</code>: Inhalt, der durch die im referenzierten Dokument beschriebene Urheberrechtslizenz abgedeckt ist.</li>
<li><code>me</code>: Links zu Inhalten, die dem Autor des aktuellen Dokuments gehören.</li>
<li><code>next</code>: Das nächste Dokument in der Serie.</li>
<li><code>nofollow</code>: Gibt an, dass der ursprüngliche Autor oder Herausgeber des aktuellen Dokuments das referenzierte Dokument nicht unterstützt.</li>
<li><code>noreferrer</code>: Verhindert das Senden des <code>Referer</code>-Headers. Hat die gleiche Wirkung wie <code>noopener</code>.</li>
<li><code>opener</code>: Erstellt einen neuen Browsing-Kontext, wenn der Hyperlink ansonsten in einem obersten Kontext geöffnet würde, der nicht sekundär ist (z. B. wenn <code>target=&quot;_blank&quot;</code> angegeben ist).</li>
<li><code>prev</code>: Das vorherige Dokument in der Serie.</li>
<li><code>search</code>: Links zu einer Ressource, die verwendet werden kann, um im aktuellen Dokument und seinen verwandten Seiten zu suchen.</li>
<li><code>tag</code>: Markiert das aktuelle Dokument mit dem angegebenen Tag.</li>
</ul>
<p><strong>Hinweis</strong>: Nur verfügbar, wenn <code>href</code> angegeben ist.</p>
</td>
  </tr>
  <tr>
    <td>autofocus</td>
    <td>autofocus</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Gibt an, ob das Element beim Laden der Seite den Fokus erhält.</p>
</td>
  </tr>
  <tr>
    <td>tabindex</td>
    <td>tabIndex</td>
    <td>false</td>
    <td>number</td>
    <td></td>
    <td><p>Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.</p>
</td>
  </tr>
  <tr>
    <td>disabled</td>
    <td>disabled</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Deaktiviert das Element.</p>
</td>
  </tr>
  <tr>
    <td>loading</td>
    <td>loading</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Gibt an, dass sich das Element in einem Ladezustand befindet.</p>
</td>
  </tr>
  <tr>
    <td>name</td>
    <td>name</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>Der Button-Name, der mit Formulardaten übermittelt wird.</p>
<p><strong>Hinweis</strong>: Nur verfügbar, wenn <code>href</code> nicht angegeben ist.</p>
</td>
  </tr>
  <tr>
    <td>value</td>
    <td>value</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>Der Button-Wert, der mit Formulardaten übermittelt wird.</p>
<p><strong>Hinweis</strong>: Nur verfügbar, wenn <code>href</code> nicht angegeben ist.</p>
</td>
  </tr>
  <tr>
    <td>type</td>
    <td>type</td>
    <td>true</td>
    <td>&#39;submit&#39; | &#39;reset&#39; | &#39;button&#39;</td>
    <td>'button'</td>
    <td><p>Gibt die Standardaktion des Buttons an. Standard: <code>button</code>. Mögliche Werte:</p>
<ul>
<li><code>submit</code>: Sendet die Formulardaten an den Server.</li>
<li><code>reset</code>: Setzt alle Steuerelemente auf ihre Anfangswerte zurück.</li>
<li><code>button</code>: Führt standardmäßig keine Aktion aus.</li>
</ul>
<p><strong>Hinweis</strong>: Nur verfügbar, wenn <code>href</code> nicht angegeben ist.</p>
</td>
  </tr>
  <tr>
    <td>form</td>
    <td>form</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Verknüpft den Button mit einem <code>&lt;form&gt;</code>-Element. Setzen Sie dies auf die <code>id</code> eines <code>&lt;form&gt;</code>-Elements im selben Dokument. Wenn nicht angegeben, verwendet der Button sein übergeordnetes <code>&lt;form&gt;</code>-Element, falls vorhanden.</p>
<p>Dadurch kann der Button jedes Formular im Dokument ansprechen, nicht nur das Formular, in dem er verschachtelt ist.</p>
<p><strong>Hinweis</strong>: Nur verfügbar, wenn <code>href</code> nicht angegeben ist.</p>
</td>
  </tr>
  <tr>
    <td>formaction</td>
    <td>formAction</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Gibt die URL an, die die vom Button übermittelten Informationen verarbeitet. Überschreibt das <code>action</code>-Attribut des zugehörigen Formulars des Buttons.</p>
<p><strong>Hinweis</strong>: Nur verfügbar, wenn <code>href</code> nicht angegeben ist und <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>formenctype</td>
    <td>formEnctype</td>
    <td>true</td>
    <td>&#39;application/x-www-form-urlencoded&#39; | &#39;multipart/form-data&#39; | &#39;text/plain&#39;</td>
    <td></td>
    <td><p>Gibt an, wie die Formulardaten kodiert werden sollen. Mögliche Werte:</p>
<ul>
<li><code>application/x-www-form-urlencoded</code>: Standard, wenn das Attribut weggelassen wird.</li>
<li><code>multipart/form-data</code>: Wird für <code>&lt;input&gt;</code>-Elemente mit <code>type=&quot;file&quot;</code> verwendet.</li>
<li><code>text/plain</code>: Nützlich zum Debuggen, aber nicht für die eigentliche Formularübermittlung.</li>
</ul>
<p>Überschreibt das <code>enctype</code>-Attribut des zugehörigen Formulars des Buttons.</p>
<p><strong>Hinweis</strong>: Nur verfügbar, wenn <code>href</code> nicht angegeben ist und <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>formmethod</td>
    <td>formMethod</td>
    <td>true</td>
    <td>&#39;post&#39; | &#39;get&#39;</td>
    <td></td>
    <td><p>Gibt die HTTP-Methode für die Formularübermittlung an. Mögliche Werte:</p>
<ul>
<li><code>post</code>: Sendet die Formulardaten im Anforderungstext.</li>
<li><code>get</code>: Hängt die Formulardaten an die <code>action</code>-URL an.</li>
</ul>
<p>Überschreibt das <code>method</code>-Attribut des zugehörigen Formulars des Buttons.</p>
<p><strong>Hinweis</strong>: Nur verfügbar, wenn <code>href</code> nicht angegeben ist und <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>formnovalidate</td>
    <td>formNoValidate</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Gibt an, dass das Formular bei der Übermittlung nicht validiert werden soll. Überschreibt das <code>novalidate</code>-Attribut des zugehörigen Formulars des Buttons.</p>
<p><strong>Hinweis</strong>: Nur verfügbar, wenn <code>href</code> nicht angegeben ist und <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>formtarget</td>
    <td>formTarget</td>
    <td>true</td>
    <td>&#39;_self&#39; | &#39;_blank&#39; | &#39;_parent&#39; | &#39;_top&#39;</td>
    <td></td>
    <td><p>Gibt an, in welchem Kontext die Antwort nach der Formularübermittlung geöffnet werden soll. Mögliche Werte:</p>
<ul>
<li><code>_self</code>: Aktueller Browsing-Kontext (Standard).</li>
<li><code>_blank</code>: Neuer Tab oder Fenster.</li>
<li><code>_parent</code>: Öffnet im übergeordneten Kontext oder <code>_self</code>, wenn kein übergeordneter Kontext vorhanden ist.</li>
<li><code>_top</code>: Öffnet im obersten Kontext oder <code>_self</code>, wenn kein übergeordneter Kontext vorhanden ist.</li>
</ul>
<p>Überschreibt das <code>target</code>-Attribut des zugehörigen Formulars des Buttons.</p>
<p><strong>Hinweis</strong>: Nur verfügbar, wenn <code>href</code> nicht angegeben ist und <code>type=&quot;submit&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>validity</td>
    <td>false</td>
    <td>ValidityState</td>
    <td></td>
    <td><p>Ein <a href="https://developer.mozilla.org/de/docs/Web/API/ValidityState" target="_blank" rel="noopener nofollow"><code>ValidityState</code></a>-Objekt, das die Gültigkeitszustände des Elements darstellt.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>validationMessage</td>
    <td>false</td>
    <td>string</td>
    <td></td>
    <td><p>Die Validierungsnachricht. Gibt eine leere Zeichenfolge zurück, wenn das Element gültig ist.</p>
</td>
  </tr>
</tbody>
</table>

### Methoden

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Beschreibung</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>click(): void</td>
    <td><p>Simuliert einen Mausklick auf das Element.</p>
</td>
  </tr>
  <tr>
    <td>focus(options?: FocusOptions): void</td>
    <td><p>Setzt den Fokus auf das Element. Der optionale Objektparameter kann eine <code>preventScroll</code>-Eigenschaft enthalten. Wenn <code>preventScroll</code> auf <code>true</code> gesetzt ist, scrollt die Seite nicht, um das fokussierte Element in den sichtbaren Bereich zu bringen.</p>
</td>
  </tr>
  <tr>
    <td>blur(): void</td>
    <td><p>Entfernt den Fokus vom Element.</p>
</td>
  </tr>
  <tr>
    <td>checkValidity(): boolean</td>
    <td><p>Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein <code>invalid</code>-Ereignis ausgelöst und <code>false</code> zurückgegeben. Wenn gültig, wird <code>true</code> zurückgegeben.</p>
</td>
  </tr>
  <tr>
    <td>reportValidity(): boolean</td>
    <td><p>Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein <code>invalid</code>-Ereignis ausgelöst, <code>false</code> zurückgegeben und eine Validierungsnachricht angezeigt. Wenn gültig, wird <code>true</code> zurückgegeben.</p>
</td>
  </tr>
  <tr>
    <td>setCustomValidity(message: string): void</td>
    <td><p>Setzt eine benutzerdefinierte Fehlermeldung. Wenn die Nachricht nicht leer ist, wird das Feld als ungültig betrachtet.</p>
</td>
  </tr>
</tbody>
</table>

### Ereignisse

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Beschreibung</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>focus</td>
    <td><p>Wird ausgelöst, wenn der Button den Fokus erhält.</p>
</td>
  </tr>
  <tr>
    <td>blur</td>
    <td><p>Wird ausgelöst, wenn der Button den Fokus verliert.</p>
</td>
  </tr>
  <tr>
    <td>invalid</td>
    <td><p>Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.</p>
</td>
  </tr>
</tbody>
</table>

### Slots

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Beschreibung</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Standard</td>
    <td><p>Button-Text.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td><p>Element auf der linken Seite des Buttons.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>Element auf der rechten Seite des Buttons.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Parts

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Beschreibung</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>button</td>
    <td><p>Internes <code>&lt;button&gt;</code>- oder <code>&lt;a&gt;</code>-Element.</p>
</td>
  </tr>
  <tr>
    <td>label</td>
    <td><p>Button-Text.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td><p>Icon auf der linken Seite des Buttons.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>Icon auf der rechten Seite des Buttons.</p>
</td>
  </tr>
  <tr>
    <td>loading</td>
    <td><p>Das <code>&lt;mdui-circular-progress&gt;</code>-Element für den Ladezustand.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Custom Property

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Beschreibung</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>--shape-corner</td>
    <td><p>Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf <a href="/de/docs/2/styles/design-tokens#shape-corner">Design-Tokens</a> zu verweisen.</p>
</td>
  </tr>
</tbody>
</table>