# Komponenta Tlačítko

Tlačítka se primárně používají k provádění akcí, jako je odeslání e-mailu, sdílení dokumentu nebo lajkování komentáře.

## Způsob použití {#usage}

Importujte komponentu podle potřeby:

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

Importujte TypeScript typy komponenty podle potřeby:

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

Příklad použití:

```html
<mdui-button>Tlačítko</mdui-button>
```

## Příklady {#examples}

### Tvar {#example-variant}

Použijte atribut `variant` k nastavení tvaru tlačítka.

```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>
```

### Celá šířka {#example-full-width}

Přidejte atribut `full-width`, aby tlačítko zabíralo celou šířku nadřazeného prvku.

```html
<mdui-button full-width>Tlačítko</mdui-button>
```

### Ikona {#example-icon}

Nastavením atributů `icon` a `end-icon` můžete přidat ikony Material Icons na levou a pravou stranu tlačítka. Lze také přidat prvky na levou a pravou stranu tlačítka pomocí slotů `icon` a `end-icon`.

```html
<mdui-button icon="search" end-icon="arrow_forward">Ikona</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>
```

### Odkaz {#example-link}

Nastavením atributu `href` můžete tlačítko změnit na odkaz. Pak můžete také použít tyto atributy související s odkazy: `download`, `target`, `rel`.

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

### Zakázaný stav a stav načítání {#example-disabled}

Atribut `disabled` tlačítko zakáže; atribut `loading` přidá stav načítání tlačítka.

```html
<mdui-button disabled>Zakázáno</mdui-button>
<mdui-button loading>Načítání</mdui-button>
<mdui-button loading disabled>Načítání a zakázáno</mdui-button>
```

## mdui-button API

### Vlastnosti

<table>
<thead>
  <tr>
    <th>Atribut</th>
    <th>Vlastnost</th>
    <th>Reflect</th>
    <th>Typ</th>
    <th>Výchozí</th>
    <th>Popis</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>Varianta tlačítka. Možné hodnoty:</p>
<ul>
<li><code>elevated</code>: Tlačítko se stínem, vhodné pro oddělení tlačítka od pozadí.</li>
<li><code>filled</code>: Výrazná varianta vhodná pro primární akce, například „Uložit“ nebo „Potvrdit“.</li>
<li><code>tonal</code>: Vizuální efekt mezi <code>filled</code> a <code>outlined</code>, vhodný pro akce se středně vysokou prioritou, jako je „Další“ v procesu.</li>
<li><code>outlined</code>: Tlačítko s okrajem, vhodné pro středně prioritní a vedlejší akce, jako je „Zpět“.</li>
<li><code>text</code>: Textové tlačítko, vhodné pro akce s nejnižší prioritou.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>full-width</td>
    <td>fullWidth</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Určuje, zda tlačítko vyplní celou šířku rodičovského prvku.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td>icon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Název ikony z knihovny Material Icons na levé straně. Lze také nastavit pomocí <code>slot=&quot;icon&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td>endIcon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Název ikony z knihovny Material Icons na pravé straně. Lze také nastavit pomocí <code>slot=&quot;end-icon&quot;</code>.</p>
</td>
  </tr>
  <tr>
    <td>href</td>
    <td>href</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Cílová URL odkazu.</p>
<p>Pokud je tato vlastnost nastavena, komponenta se interně vykreslí jako prvek <code>&lt;a&gt;</code> a zpřístupní se vlastnosti pro odkazy.</p>
</td>
  </tr>
  <tr>
    <td>download</td>
    <td>download</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Soubor ke stažení.</p>
<p><strong>Poznámka</strong>: Platí pouze, pokud je nastaven atribut <code>href</code>.</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>Způsob otevření odkazu. Možné hodnoty:</p>
<ul>
<li><code>_blank</code>: Otevře odkaz v novém okně nebo kartě.</li>
<li><code>_parent</code>: Otevře odkaz v nadřazeném okně.</li>
<li><code>_self</code>: Výchozí možnost. Otevře odkaz ve stejném okně.</li>
<li><code>_top</code>: Otevře odkaz v celém okně.</li>
</ul>
<p><strong>Poznámka</strong>: Platí pouze, pokud je nastaven atribut <code>href</code>.</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>Vztah mezi aktuálním dokumentem a odkazovaným dokumentem. Možné hodnoty:</p>
<ul>
<li><code>alternate</code>: Alternativní verze aktuálního dokumentu.</li>
<li><code>author</code>: Autor aktuálního dokumentu nebo článku.</li>
<li><code>bookmark</code>: Trvalý odkaz na konkrétní část dokumentu.</li>
<li><code>external</code>: Odkaz vede na externí zdroj (mimo aktuální web/doménu).</li>
<li><code>help</code>: Odkaz na související nápovědu.</li>
<li><code>license</code>: Hlavní obsah aktuálního dokumentu je pokryt licencí odkazovaného dokumentu.</li>
<li><code>me</code>: Odkaz směřuje na profil vlastníka (rel=&quot;me&quot;).</li>
<li><code>next</code>: Aktuální dokument je součástí série a odkazovaný dokument je následující v sérii.</li>
<li><code>nofollow</code>: Autor nebo vydavatel aktuálního dokumentu neschvaluje odkazovaný dokument.</li>
<li><code>noreferrer</code>: Neodesílá HTTP hlavičku <code>Referer</code>. Má podobný účinek jako <code>noopener</code>.</li>
<li><code>opener</code>: Pokud má odkaz atribut <code>target=&quot;_blank&quot;</code>, atribut <code>rel=&quot;opener&quot;</code> určuje, zda nové okno nebo karta bude mít přístup k původnímu oknu přes <code>window.opener</code>.</li>
<li><code>prev</code>: Aktuální dokument je součástí série a odkazovaný dokument je předchozí v sérii.</li>
<li><code>search</code>: Odkazuje na vyhledávací zdroj pro aktuální dokument a související stránky.</li>
<li><code>tag</code>: Poskytuje štítek vhodný pro aktuální dokument (identifikovaný danou adresou).</li>
</ul>
<p><strong>Poznámka</strong>: Dostupné pouze při zadání atributu <code>href</code>.</p>
</td>
  </tr>
  <tr>
    <td>autofocus</td>
    <td>autofocus</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Určuje, zda prvek získá automaticky fokus po dokončení načítání stránky.</p>
</td>
  </tr>
  <tr>
    <td>tabindex</td>
    <td>tabIndex</td>
    <td>false</td>
    <td>number</td>
    <td></td>
    <td><p>Pořadí prvku při přepínání fokusu pomocí klávesy Tab.</p>
</td>
  </tr>
  <tr>
    <td>disabled</td>
    <td>disabled</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Určuje, zda je prvek zakázaný.</p>
</td>
  </tr>
  <tr>
    <td>loading</td>
    <td>loading</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Určuje, zda je prvek ve stavu načítání.</p>
</td>
  </tr>
  <tr>
    <td>name</td>
    <td>name</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>Název tlačítka, který se odešle spolu s daty formuláře.</p>
<p><strong>Poznámka</strong>: Tato vlastnost platí pouze, pokud není nastaven atribut <code>href</code>.</p>
</td>
  </tr>
  <tr>
    <td>value</td>
    <td>value</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>Počáteční hodnota tlačítka, která se odešle spolu s daty formuláře.</p>
<p><strong>Poznámka</strong>: Tato vlastnost platí pouze, pokud není nastaven atribut <code>href</code>.</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>Typ tlačítka. Výchozí typ je <code>button</code>. Možné typy:</p>
<ul>
<li><code>submit</code>: Kliknutím na tlačítko se odešlou data formuláře na server.</li>
<li><code>reset</code>: Kliknutím na tlačítko se všechna pole ve formuláři resetují na počáteční hodnoty.</li>
<li><code>button</code>: Tento typ tlačítka nemá žádné výchozí chování.</li>
</ul>
<p><strong>Poznámka</strong>: Tato vlastnost platí pouze, pokud není zadán atribut <code>href</code>.</p>
</td>
  </tr>
  <tr>
    <td>form</td>
    <td>form</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Přidružený formulář <code>&lt;form&gt;</code>. Hodnotou by mělo být <code>id</code> prvku <code>&lt;form&gt;</code> na stejné stránce.</p>
<p>Pokud není atribut zadán, musí být tento prvek potomkem <code>&lt;form&gt;</code>. Díky tomuto atributu jej však lze umístit kamkoli na stránku, nejen jako potomka <code>&lt;form&gt;</code>.</p>
<p><strong>Poznámka</strong>: Tato vlastnost platí pouze, pokud není zadán atribut <code>href</code>.</p>
</td>
  </tr>
  <tr>
    <td>formaction</td>
    <td>formAction</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Adresa URL pro odeslání formuláře.</p>
<p>Přepíše atribut <code>action</code> formuláře, pokud je nastaven.</p>
<p><strong>Poznámka</strong>: Tato vlastnost platí pouze, pokud není zadán atribut <code>href</code> a <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>Typ obsahu při odesílání formuláře na server. Možné hodnoty:</p>
<ul>
<li><code>application/x-www-form-urlencoded</code>: Výchozí hodnota, pokud atribut není zadán.</li>
<li><code>multipart/form-data</code>: Používá se, když formulář obsahuje prvek <code>&lt;input type=&quot;file&quot;&gt;</code>.</li>
<li><code>text/plain</code>: Přidáno v HTML5; používá se pro ladění.</li>
</ul>
<p>Přepíše atribut <code>enctype</code> prvku <code>&lt;form&gt;</code>, pokud je nastaven.</p>
<p><strong>Poznámka</strong>: Tato vlastnost platí pouze, pokud není zadán atribut <code>href</code> a <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>HTTP metoda pro odeslání formuláře. Možné hodnoty:</p>
<ul>
<li><code>post</code>: Data formuláře jsou obsažena v těle požadavku a odeslána na server.</li>
<li><code>get</code>: Data formuláře jsou připojena k URI formuláře pomocí <code>?</code> jako oddělovače a výsledné URI je odesláno na server. Tato metoda se používá, když formulář nemá vedlejší účinky a obsahuje pouze ASCII znaky.</li>
</ul>
<p>Přepíše atribut <code>method</code> prvku <code>&lt;form&gt;</code>, pokud je nastaven.</p>
<p><strong>Poznámka</strong>: Tato vlastnost platí pouze, pokud není zadán atribut <code>href</code> a <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>Je-li nastaven, přeskočí se při odesílání formuláře validace.</p>
<p>Přepíše atribut <code>novalidate</code> prvku <code>&lt;form&gt;</code>, pokud je nastaven.</p>
<p><strong>Poznámka</strong>: Tato vlastnost platí pouze, pokud není zadán atribut <code>href</code> a <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>Určuje, kde se zobrazí odpověď po odeslání formuláře. Možné hodnoty:</p>
<ul>
<li><code>_self</code>: Výchozí chování. Otevře se ve stejném okně.</li>
<li><code>_blank</code>: Otevře se v novém okně nebo kartě.</li>
<li><code>_parent</code>: Otevře se v nadřazeném okně.</li>
<li><code>_top</code>: Otevře se v celém okně.</li>
</ul>
<p>Přepíše atribut <code>target</code> prvku <code>&lt;form&gt;</code>, pokud je nastaven.</p>
<p><strong>Poznámka</strong>: Tato vlastnost platí pouze, pokud není zadán atribut <code>href</code> a <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>Objekt s informacemi o stavu validace formuláře; podrobnosti viz <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState" target="_blank" rel="noopener nofollow"><code>ValidityState</code></a>.</p>
</td>
  </tr>
  <tr>
    <td>undefined</td>
    <td>validationMessage</td>
    <td>false</td>
    <td>string</td>
    <td></td>
    <td><p>Pokud pole formuláře neprojde validací, tato vlastnost obsahuje chybovou zprávu. Při úspěšné validaci je výsledkem prázdný řetězec.</p>
</td>
  </tr>
</tbody>
</table>

### Metody

<table>
<thead>
  <tr>
    <th>Název</th>
    <th>Popis</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>click(): void</td>
    <td><p>Simuluje kliknutí myší na prvek.</p>
</td>
  </tr>
  <tr>
    <td>focus(options?: FocusOptions): void</td>
    <td><p>Nastaví fokus na aktuální prvek.</p>
<p>Lze předat objekt jako parametr s vlastnostmi:</p>
<ul>
<li><code>preventScroll</code>: Ve výchozím nastavení se po získání fokusu stránka posune tak, aby byl prvek viditelný. Pokud nechcete, aby se stránka posouvala, nastavte tuto vlastnost na <code>true</code>.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>blur(): void</td>
    <td><p>Odebere fokus z aktuálního prvku.</p>
</td>
  </tr>
  <tr>
    <td>checkValidity(): boolean</td>
    <td><p>Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí <code>false</code> a spustí událost <code>invalid</code>; pokud ano, vrátí <code>true</code>.</p>
</td>
  </tr>
  <tr>
    <td>reportValidity(): boolean</td>
    <td><p>Zkontroluje, zda pole formuláře prošlo validací. Pokud ne, vrátí <code>false</code> a spustí událost <code>invalid</code>; pokud ano, vrátí <code>true</code>.</p>
<p>Při neúspěšné validaci se zobrazí chybová zpráva.</p>
</td>
  </tr>
  <tr>
    <td>setCustomValidity(message: string): void</td>
    <td><p>Nastaví vlastní chybový text. Dokud tento text není prázdný, znamená to, že pole neprošlo validací.</p>
</td>
  </tr>
</tbody>
</table>

### Události

<table>
<thead>
  <tr>
    <th>Název</th>
    <th>Popis</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>focus</td>
    <td><p>Spustí se při získání fokusu.</p>
</td>
  </tr>
  <tr>
    <td>blur</td>
    <td><p>Spustí se při ztrátě fokusu.</p>
</td>
  </tr>
  <tr>
    <td>invalid</td>
    <td><p>Spustí se, pokud pole formuláře neprojde validací.</p>
</td>
  </tr>
</tbody>
</table>

### Slots

<table>
<thead>
  <tr>
    <th>Název</th>
    <th>Popis</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>(výchozí)</td>
    <td><p>Text tlačítka.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td><p>Prvek na levé straně tlačítka.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>Prvek na pravé straně tlačítka.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Parts

<table>
<thead>
  <tr>
    <th>Název</th>
    <th>Popis</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>button</td>
    <td><p>Interní prvek <code>&lt;button&gt;</code> nebo <code>&lt;a&gt;</code>.</p>
</td>
  </tr>
  <tr>
    <td>label</td>
    <td><p>Text tlačítka.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td><p>Ikona na levé straně tlačítka.</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>Ikona na pravé straně tlačítka.</p>
</td>
  </tr>
  <tr>
    <td>loading</td>
    <td><p>Prvek <code>&lt;mdui-circular-progress&gt;</code> ve stavu načítání.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Custom Properties

<table>
<thead>
  <tr>
    <th>Název</th>
    <th>Popis</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>--shape-corner</td>
    <td><p>Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na <a href="/cs/docs/2/styles/design-tokens#shape-corner">Designové tokeny</a>.</p>
</td>
  </tr>
</tbody>
</table>