Button - Tlačidlo

Tlačidlo

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" class="govuk-button govuk-button__basic" data-module="govuk-button">
  Primárne tlačidlo
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  text: "Primárne tlačidlo",
  classes: "govuk-button__basic"
}) }}

Tlačidlo default with html

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" class="govuk-button govuk-button__basic" data-module="govuk-button">
  <span>Primárne tlačidlo</span>
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  html: "<span>Primárne tlačidlo</span>",
  classes: "govuk-button__basic"
}) }}

Tlačidlo default with icon

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" class="govuk-button govuk-button__basic" data-module="govuk-button">
  <span>Primárne tlačidlo</span><span class="material-icons" aria-hidden="true">arrow_drop_down</span><span class="material-icons rotate180" aria-hidden="true">arrow_drop_down</span>
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  html: '<span>Primárne tlačidlo</span><span class="material-icons" aria-hidden="true">arrow_drop_down</span><span class="material-icons rotate180" aria-hidden="true">arrow_drop_down</span>',
  classes: "govuk-button__basic"
}) }}

Tlačidlo start button

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" class="govuk-button govuk-button--start" data-module="govuk-button">
  Primárne tlačidlo
  <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
    <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
  </svg>
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  text: "Primárne tlačidlo",
  isStartButton: true
}) }}

Tlačidlo ako odoslanie formuláru

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<input value="Odoslať" type="submit" class="govuk-button govuk-button__basic" data-module="govuk-button">

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  element: "input",
  text: "Odoslať",
  classes: "govuk-button__basic"
}) }}

Tlačidlo so stavom :active

Otvoriť ukážku na novej záložke

Simuluje aktívny stav :active CSS pseudotriedy, nie je súčasťou produkčného balíčku.

Zdrojový kód

HTML

<button type="submit" name="active" class="govuk-button govuk-button__basic :active" data-module="govuk-button">
  Aktívne
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "active",
  text: "Aktívne",
  classes: "govuk-button__basic :active"
}) }}

Tlačidlo zneplatnené

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<input value="Zneplatnené" type="submit" disabled aria-disabled="true" class="govuk-button govuk-button__basic" data-module="govuk-button">

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  element: "input",
  text: "Zneplatnené",
  classes: "govuk-button__basic",
  disabled: true
}) }}

Tlačidlo úspešné

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" class="govuk-button govuk-button__success" data-module="govuk-button">
  Súhlasím
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  text: "Súhlasím",
  classes: "govuk-button__success"
}) }}

Tlačidlo upozorňovacie

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" class="govuk-button govuk-button__warning" data-module="govuk-button">
  Upozornenie
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  text: "Upozornenie",
  classes: "govuk-button__warning"
}) }}

Tlačidlo zakázané

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" disabled aria-disabled="true" class="govuk-button" data-module="govuk-button">
  Zrušiť
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  text: "Zrušiť",
  disabled: true
}) }}

Tlačidlo stav :hover

Otvoriť ukážku na novej záložke

Simuluje aktívny stab :hover CSS pseudotriedy, nie je súčasťou produkčného balíčku.

Zdrojový kód

HTML

<button type="submit" name="hover" class="govuk-button :hover" data-module="govuk-button">
  Stlačené tlačídlo
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "hover",
  text: "Stlačené tlačídlo",
  classes: ":hover"
}) }}

Tlačidlo with focus state

Otvoriť ukážku na novej záložke

Simuluje aktívny stav :focus CSS pseudotriedy, nie je súčasťou produkčného balíčku.

Zdrojový kód

HTML

<button type="submit" name="focus" class="govuk-button :focus" data-module="govuk-button">
  Focussed
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "focus",
  text: "Focussed",
  classes: ":focus"
}) }}

Tlačidlo veľké

Otvoriť ukážku na novej záložke

Large button

Zdrojový kód

HTML

<button type="submit" name="Button Large" class="govuk-button govuk-button__large" data-module="govuk-button">
  Veľké tlačidlo
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "Button Large",
  text: "Veľké tlačidlo",
  classes: "govuk-button__large"
}) }}

Tlačidlo veľké s ikonou

Otvoriť ukážku na novej záložke

Large button with icon

Zdrojový kód

HTML

<button type="submit" name="Button Large" class="govuk-button govuk-button__large" data-module="govuk-button">
  <span>Veľké tlačidlo</span><span class="material-icons" aria-hidden="true">arrow_drop_down</span>
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "Button Large",
  html: '<span>Veľké tlačidlo</span><span class="material-icons" aria-hidden="true">arrow_drop_down</span>',
  classes: "govuk-button__large"
}) }}

Tlačidlo sekundárne

Otvoriť ukážku na novej záložke

Tlačidlo v stave sekundárne

Zdrojový kód

HTML

<button type="submit" name="secondary" class="govuk-button govuk-button--sec" data-module="govuk-button">
  Sekundárne tlačidlo
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "secondary",
  text: "Sekundárne tlačidlo",
  classes: "govuk-button--sec"
}) }}

Tlačidlo sekundárne úspešné

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" name="secondary" class="govuk-button govuk-button--sec__success" data-module="govuk-button">
  Sekundárne úspešné
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "secondary",
  text: "Sekundárne úspešné",
  classes: "govuk-button--sec__success"
}) }}

Tlačidlo sekundárne upozorňovacie tlačidlo

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" name="secondary" class="govuk-button govuk-button--sec__warning" data-module="govuk-button">
  Sekundárne upozorňovacie
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "secondary",
  text: "Sekundárne upozorňovacie",
  classes: "govuk-button--sec__warning"
}) }}

Tlačidlo sekundárne zakázané

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" name="secondary" disabled aria-disabled="true" class="govuk-button govuk-button--sec" data-module="govuk-button">
  Sekundárne zakázané
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "secondary",
  text: "Sekundárne zakázané",
  classes: "govuk-button--sec",
  disabled: true
}) }}

Tlačidlo sekundárne ako linka

Otvoriť ukážku na novej záložke

Tlačidlo vo forme sekundárnej linky

Zdrojový kód

HTML

<a href="/" role="button" draggable="false" class="govuk-button govuk-button--sec" data-module="govuk-button">
  Sekundárne tlačidlo
</a>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "secondary",
  text: "Sekundárne tlačidlo",
  href: "/",
  classes: "govuk-button--sec"
}) }}

Tlačidlo upozorňovacie

Otvoriť ukážku na novej záložke

Tlačidlo kde potrebujeme varovať požívateľa

Zdrojový kód

HTML

<button type="submit" name="Warning" class="govuk-button govuk-button__warning" data-module="govuk-button">
  Upozornenie
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "Warning",
  text: "Upozornenie",
  classes: "govuk-button__warning"
}) }}

Tlačidlo upozorňovacie zakázané

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" name="warning" disabled aria-disabled="true" class="govuk-button govuk-button--warning" data-module="govuk-button">
  Upozornenie
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "warning",
  text: "Upozornenie",
  classes: "govuk-button--warning",
  disabled: true
}) }}

Tlačidlo vo forme textu

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" name="Texted" class="govuk-button govuk-button--texted" data-module="govuk-button">
  Textové tlačidlo
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "Texted",
  text: "Textové tlačidlo",
  classes: "govuk-button--texted"
}) }}

Tlačidlo vo forme textu s ikonou

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" name="Texted" class="govuk-button govuk-button--texted" data-module="govuk-button">
  <span>tlacidloy</span><span>tlacidloy</span><span class="material-icons" aria-hidden="true">arrow_drop_down</span><span>tlacidloy</span>
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "Texted",
  classes: "govuk-button--texted",
  html: '<span>tlacidloy</span><span>tlacidloy</span><span class="material-icons" aria-hidden="true">arrow_drop_down</span><span>tlacidloy</span>'
}) }}

Tlačidlo textové úspešné

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" name="Texted btn success" class="govuk-button govuk-button--texted govuk-button--texted__success" data-module="govuk-button">
  Textové tlačidlo
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "Texted btn success",
  text: "Textové tlačidlo",
  classes: "govuk-button--texted govuk-button--texted__success"
}) }}

Tlačidlo textové upozorňovacie

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" name="Texted" class="govuk-button govuk-button--texted govuk-button--texted__warning" data-module="govuk-button">
  Textové tlačidlo
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "Texted",
  text: "Textové tlačidlo",
  classes: "govuk-button--texted govuk-button--texted__warning"
}) }}

Tlačidlo textové zakázané

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" name="Texted" disabled aria-disabled="true" class="govuk-button govuk-button--texted" data-module="govuk-button">
  Textové tlačidlo
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "Texted",
  text: "Textové tlačidlo",
  classes: "govuk-button--texted",
  disabled: true
}) }}

Tlačidlo textové úspešné zakázané

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" name="Texted btn success" disabled aria-disabled="true" class="govuk-button govuk-button--texted govuk-button--texted__success" data-module="govuk-button">
  Textové tlačidlo
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "Texted btn success",
  text: "Textové tlačidlo",
  classes: "govuk-button--texted govuk-button--texted__success",
  disabled: true
}) }}

Tlačidlo textové upozorňovacie zakázané

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<button type="submit" name="Texted" disabled aria-disabled="true" class="govuk-button govuk-button--texted govuk-button--texted__warning" data-module="govuk-button">
  Texted btn warning
</button>

Makro

{% from "govuk/components/button/macro.njk" import govukButton %}

{{ govukButton({
  name: "Texted",
  text: "Texted btn warning",
  classes: "govuk-button--texted govuk-button--texted__warning",
  disabled: true
}) }}