# Komponent Przycisk

Przycisk służy głównie do wykonywania akcji, takich jak wysyłanie wiadomości e-mail, udostępnianie dokumentów lub komentowanie postów.

## Sposób użycia {#usage}

Zaimportuj komponent:

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

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

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

## Przykłady {#examples}

### Kształt {#example-variant}

Atrybut `variant` ustawia kształt przycisku.

```html
<mdui-button variant="elevated">Podniesiony</mdui-button>
<mdui-button variant="filled">Wypełniony</mdui-button>
<mdui-button variant="tonal">Tonowany</mdui-button>
<mdui-button variant="outlined">Z obramowaniem</mdui-button>
<mdui-button variant="text">Tekstowy</mdui-button>
```

### Pełna szerokość {#example-full-width}

Atrybut `full-width` sprawia, że przycisk zajmie całą szerokość elementu nadrzędnego.

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

### Ikona {#example-icon}

Ustawienie atrybutów `icon` i `end-icon` pozwala dodać ikony Material Icons odpowiednio po lewej i prawej stronie przycisku. Możesz również dodać elementy po lewej i prawej stronie przycisku za pomocą slotów `icon` i `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>
```

### Link {#example-link}

Ustawienie atrybutu `href` zmienia przycisk w link, a dodatkowo możesz użyć atrybutów związanych z linkami: `download`, `target`, `rel`.

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

### Stan wyłączony i ładowania {#example-disabled}

Dodanie atrybutu `disabled` wyłącza przycisk; dodanie atrybutu `loading` dodaje stan ładowania.

```html
<mdui-button disabled>Wyłączony</mdui-button>
<mdui-button loading>Ładowanie</mdui-button>
<mdui-button loading disabled>Ładowanie i wyłączony</mdui-button>
```

## mdui-button API

### Właściwości

<table>
<thead>
  <tr>
    <th>Atrybut HTML</th>
    <th>Właściwość JavaScript</th>
    <th>Reflect</th>
    <th>Typ</th>
    <th>Domyślne</th>
    <th>Opis</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>Wariant przycisku. Dozwolone wartości:</p>
<ul>
<li><code>elevated</code>: Przycisk z cieniem, odpowiedni do sytuacji, w których przycisk ma być wizualnie oddzielony od tła</li>
<li><code>filled</code>: Wyrazisty wygląd, odpowiedni do kluczowych akcji w ważnych procesach, np. „Zapisz”, „Potwierdź”</li>
<li><code>tonal</code>: Wygląd pośredni między <code>filled</code> a <code>outlined</code>, odpowiedni do akcji o średnim i wysokim priorytecie, np. „Dalej” w procesie</li>
<li><code>outlined</code>: Przycisk z obramowaniem, odpowiedni do akcji o średnim priorytecie i pomocniczych, np. „Wstecz”</li>
<li><code>text</code>: Przycisk tekstowy, odpowiedni dla akcji o najniższym priorytecie</li>
</ul>
</td>
  </tr>
  <tr>
    <td>full-width</td>
    <td>fullWidth</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Określa, czy przycisk wypełnia całą szerokość elementu nadrzędnego.</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td>icon</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Nazwa ikony Material Icons po lewej stronie. Można również ustawić za 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>Nazwa ikony Material Icons po prawej stronie. Można również ustawić za 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>Docelowy adres URL łącza.</p>
<p>Jeśli atrybut jest ustawiony, komponent jest renderowany jako element <code>&lt;a&gt;</code>, co umożliwia korzystanie z atrybutów dotyczących łączy.</p>
</td>
  </tr>
  <tr>
    <td>download</td>
    <td>download</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Nazwa pliku do pobrania.</p>
<p><strong>Uwaga</strong>: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut <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>Sposób otwarcia łącza. Dozwolone wartości:</p>
<ul>
<li><code>_blank</code>: Otwiera w nowym oknie</li>
<li><code>_parent</code>: Otwiera w oknie nadrzędnym</li>
<li><code>_self</code>: Otwiera w bieżącej ramce</li>
<li><code>_top</code>: Otwiera w całym oknie</li>
</ul>
<p><strong>Uwaga</strong>: Ten atrybut działa tylko wtedy, gdy ustawiono atrybut <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>Relacja między bieżącym dokumentem a dokumentem, do którego prowadzi łącze. Dozwolone wartości:</p>
<ul>
<li><code>alternate</code>: Alternatywna wersja bieżącego dokumentu</li>
<li><code>author</code>: Autor bieżącego dokumentu lub artykułu</li>
<li><code>bookmark</code>: Stałe łącze do najbliższej sekcji nadrzędnej</li>
<li><code>external</code>: Dokument, do którego prowadzi łącze, nie znajduje się w tej samej witrynie co bieżący dokument</li>
<li><code>help</code>: Łącze do powiązanej dokumentacji pomocy</li>
<li><code>license</code>: Główna treść bieżącego dokumentu jest objęta prawami autorskimi dołączonego pliku</li>
<li><code>me</code>: Bieżący dokument reprezentuje właściciela treści, do której prowadzi łącze</li>
<li><code>next</code>: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest następnym dokumentem w tej sekwencji</li>
<li><code>nofollow</code>: Autor lub wydawca bieżącego dokumentu nie rekomenduje dokumentu, do którego prowadzi łącze</li>
<li><code>noreferrer</code>: Pomija nagłówek <code>Referer</code>. Efekt podobny do <code>noopener</code></li>
<li><code>opener</code>: Jeśli hiperłącze utworzy kontekst przeglądania najwyższego poziomu (tj. wartość atrybutu <code>target</code> to <code>_blank</code>), tworzy podrzędny kontekst przeglądania</li>
<li><code>prev</code>: Bieżący dokument jest częścią sekwencji, a dokument, do którego prowadzi łącze, jest poprzednim dokumentem w tej sekwencji</li>
<li><code>search</code>: Zawiera łącze do zasobu umożliwiającego przeszukiwanie bieżącego pliku i powiązanych z nim stron</li>
<li><code>tag</code>: Zawiera znacznik (identyfikowany przez podany adres) mający zastosowanie do bieżącego dokumentu</li>
</ul>
<p><strong>Uwaga</strong>: Dostępne tylko wtedy, gdy określono atrybut <code>href</code>.</p>
</td>
  </tr>
  <tr>
    <td>autofocus</td>
    <td>autofocus</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Określa, czy element automatycznie uzyskuje fokus po załadowaniu strony.</p>
</td>
  </tr>
  <tr>
    <td>tabindex</td>
    <td>tabIndex</td>
    <td>false</td>
    <td>number</td>
    <td></td>
    <td><p>Określa kolejność elementu podczas nawigacji za pomocą klawiatury (przycisk Tab).</p>
</td>
  </tr>
  <tr>
    <td>disabled</td>
    <td>disabled</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Określa, czy komponent jest wyłączony.</p>
</td>
  </tr>
  <tr>
    <td>loading</td>
    <td>loading</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Określa, czy komponent jest w stanie ładowania.</p>
</td>
  </tr>
  <tr>
    <td>name</td>
    <td>name</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>Nazwa przycisku, która zostanie wysłana wraz z danymi formularza.</p>
<p><strong>Uwaga</strong>: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu <code>href</code>.</p>
</td>
  </tr>
  <tr>
    <td>value</td>
    <td>value</td>
    <td>true</td>
    <td>string</td>
    <td>''</td>
    <td><p>Wartość początkowa przycisku, która zostanie wysłana wraz z danymi formularza.</p>
<p><strong>Uwaga</strong>: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu <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 przycisku. Typ domyślny to <code>button</code>. Dozwolone typy:</p>
<ul>
<li><code>submit</code>: Kliknięcie przycisku przesyła dane formularza do serwera</li>
<li><code>reset</code>: Kliknięcie przycisku resetuje wszystkie elementy formularza do ich wartości początkowych</li>
<li><code>button</code>: Ten typ przycisku nie ma domyślnego zachowania</li>
</ul>
<p><strong>Uwaga</strong>: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu <code>href</code>.</p>
</td>
  </tr>
  <tr>
    <td>form</td>
    <td>form</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Powiązany element <code>&lt;form&gt;</code>. Wartość tego atrybutu powinna być <code>id</code> elementu <code>&lt;form&gt;</code> na tej samej stronie.</p>
<p>Jeśli ten atrybut nie jest określony, element ten musi być elementem potomnym elementu <code>&lt;form&gt;</code>. Ten atrybut umożliwia umieszczenie elementu w dowolnym miejscu na stronie, nie tylko jako element potomny elementu <code>&lt;form&gt;</code>.</p>
<p><strong>Uwaga</strong>: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu <code>href</code>.</p>
</td>
  </tr>
  <tr>
    <td>formaction</td>
    <td>formAction</td>
    <td>true</td>
    <td>string</td>
    <td></td>
    <td><p>Określa adres URL do przesłania formularza.</p>
<p>Jeśli ten atrybut jest określony, zastępuje atrybut <code>action</code> elementu <code>&lt;form&gt;</code>.</p>
<p><strong>Uwaga</strong>: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu <code>href</code> i <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>Określa typ zawartości przesyłanej do serwera podczas wysyłania formularza. Dozwolone wartości:</p>
<ul>
<li><code>application/x-www-form-urlencoded</code>: Wartość domyślna, gdy atrybut nie jest określony</li>
<li><code>multipart/form-data</code>: Używany, gdy formularz zawiera element <code>&lt;input type=&quot;file&quot;&gt;</code></li>
<li><code>text/plain</code>: Nowość w HTML5, używana do debugowania</li>
</ul>
<p>Jeśli ten atrybut jest określony, zastępuje atrybut <code>enctype</code> elementu <code>&lt;form&gt;</code>.</p>
<p><strong>Uwaga</strong>: Ten atrybut działa tylko wtedy, gdy nie określono atrybutu <code>href</code> i <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>Określa metodę HTTP używaną do przesłania formularza. Dozwolone wartości:</p>
<ul>
<li><code>post</code>: Dane formularza są zawarte w treści formularza i wysyłane do serwera</li>
<li><code>get</code>: Dane formularza są dołączane do adresu URI formularza za pomocą separatora <code>?</code>, a wygenerowany adres URI jest wysyłany do serwera. Tej metody należy używać, gdy formularz nie powoduje skutków ubocznych i zawiera tylko znaki ASCII</li>
</ul>
<p>Jeśli ten atrybut jest ustawiony, zastępuje atrybut <code>method</code> elementu <code>&lt;form&gt;</code>.</p>
<p><strong>Uwaga</strong>: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu <code>href</code> i <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 ten atrybut jest ustawiony, formularz nie jest walidowany podczas wysyłania.</p>
<p>Jeśli ten atrybut jest ustawiony, zastępuje atrybut <code>novalidate</code> elementu <code>&lt;form&gt;</code>.</p>
<p><strong>Uwaga</strong>: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu <code>href</code> i <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>Określa, gdzie wyświetlić odpowiedź otrzymaną po przesłaniu formularza. Dozwolone wartości:</p>
<ul>
<li><code>_self</code>: Otwiera w bieżącej ramce</li>
<li><code>_blank</code>: Otwiera w nowym oknie</li>
<li><code>_parent</code>: Otwiera w oknie nadrzędnym</li>
<li><code>_top</code>: Otwiera w całym oknie</li>
</ul>
<p>Jeśli ten atrybut jest ustawiony, zastępuje atrybut <code>target</code> elementu <code>&lt;form&gt;</code>.</p>
<p><strong>Uwaga</strong>: Ten atrybut działa tylko wtedy, gdy nie ustawiono atrybutu <code>href</code> i <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>Obiekt stanu walidacji formularza, zobacz <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>Jeśli walidacja formularza nie powiedzie się, ten atrybut zawiera komunikat informacyjny. Jeśli walidacja się powiedzie, ten atrybut jest pustym ciągiem znaków</p>
</td>
  </tr>
</tbody>
</table>

### Metody

<table>
<thead>
  <tr>
    <th>Nazwa</th>
    <th>Opis</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>click(): void</td>
    <td><p>Symuluje kliknięcie myszą na elemencie</p>
</td>
  </tr>
  <tr>
    <td>focus(options?: FocusOptions): void</td>
    <td><p>Przenosi fokus na bieżący element.</p>
<p>Można przekazać obiekt jako parametr, którego właściwości obejmują:</p>
<ul>
<li><code>preventScroll</code>: Domyślnie, po otrzymaniu fokusu przez element, strona przewinie się, aby go wyświetlić. Aby zapobiec przewijaniu strony, ustaw tę właściwość na <code>true</code>.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>blur(): void</td>
    <td><p>Usuwa fokus z bieżącego elementu</p>
</td>
  </tr>
  <tr>
    <td>checkValidity(): boolean</td>
    <td><p>Sprawdza poprawność pola formularza. Jeśli nie, zwraca <code>false</code> i wywołuje zdarzenie <code>invalid</code>; jeśli tak, zwraca <code>true</code></p>
</td>
  </tr>
  <tr>
    <td>reportValidity(): boolean</td>
    <td><p>Sprawdza poprawność pola formularza. Jeśli nie, zwraca <code>false</code> i wywołuje zdarzenie <code>invalid</code>; jeśli tak, zwraca <code>true</code>.</p>
<p>Jeśli walidacja się nie powiedzie, na komponencie wyświetlany jest również komunikat o niepowodzeniu walidacji.</p>
</td>
  </tr>
  <tr>
    <td>setCustomValidity(message: string): void</td>
    <td><p>Ustawia niestandardowy komunikat o błędzie. Dopóki ten tekst nie jest pusty, oznacza to, że pole nie przeszło walidacji</p>
</td>
  </tr>
</tbody>
</table>

### Zdarzenia

<table>
<thead>
  <tr>
    <th>Nazwa</th>
    <th>Opis</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>focus</td>
    <td><p>Wywoływane po otrzymaniu fokusu</p>
</td>
  </tr>
  <tr>
    <td>blur</td>
    <td><p>Wywoływane po utracie fokusu</p>
</td>
  </tr>
  <tr>
    <td>invalid</td>
    <td><p>Wywoływane, gdy pole formularza nie przejdzie walidacji</p>
</td>
  </tr>
</tbody>
</table>

### Slots

<table>
<thead>
  <tr>
    <th>Nazwa</th>
    <th>Opis</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>(domyślny)</td>
    <td><p>Tekst przycisku</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td><p>Element po lewej stronie przycisku</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>Element po prawej stronie przycisku</p>
</td>
  </tr>
</tbody>
</table>

### CSS Parts

<table>
<thead>
  <tr>
    <th>Nazwa</th>
    <th>Opis</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>button</td>
    <td><p>Wewnętrzny element <code>&lt;button&gt;</code> lub <code>&lt;a&gt;</code></p>
</td>
  </tr>
  <tr>
    <td>label</td>
    <td><p>Tekst przycisku</p>
</td>
  </tr>
  <tr>
    <td>icon</td>
    <td><p>Ikona po lewej stronie przycisku</p>
</td>
  </tr>
  <tr>
    <td>end-icon</td>
    <td><p>Ikona po prawej stronie przycisku</p>
</td>
  </tr>
  <tr>
    <td>loading</td>
    <td><p>Element <code>&lt;mdui-circular-progress&gt;</code> w stanie ładowania</p>
</td>
  </tr>
</tbody>
</table>

### Właściwości niestandardowe CSS

<table>
<thead>
  <tr>
    <th>Nazwa</th>
    <th>Opis</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>--shape-corner</td>
    <td><p>Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do <a href="/pl/docs/2/styles/design-tokens#shape-corner">tokenów projektowych</a></p>
</td>
  </tr>
</tbody>
</table>