Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficiálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK frontend
  2. Button

Button

Code

Markup

<button type="submit" class="govuk-button" data-module="govuk-button">
  Save and continue
</button>

Macro

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

{{ govukButton({
  "text": "Save and continue"
}) }}

Button disabled

(open in a new window)
Code

Markup

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

Macro

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

{{ govukButton({
  "text": "Disabled button",
  "disabled": true
}) }}
Code

Markup

<a href="/" role="button" draggable="false" class="govuk-button" data-module="govuk-button">
  Link button
</a>

Macro

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

{{ govukButton({
  "text": "Link button",
  "href": "/"
}) }}
(open in a new window)
Code

Markup

<a href="/" role="button" draggable="false" class="govuk-button govuk-button--disabled" data-module="govuk-button">
  Disabled link button
</a>

Macro

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

{{ govukButton({
  "text": "Disabled link button",
  "href": "/",
  "disabled": true
}) }}
(open in a new window)
Code

Markup

<a href="/" role="button" draggable="false" class="govuk-button govuk-button--start" data-module="govuk-button">
  Start now link button
  <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false">
    <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
  </svg></a>

Macro

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

{{ govukButton({
  "text": "Start now link button",
  "href": "/",
  "isStartButton": true
}) }}
Code

Markup

<input value="Start now" name="start-now" type="submit" class="govuk-button" data-module="govuk-button">

Macro

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

{{ govukButton({
  "element": "input",
  "name": "start-now",
  "text": "Start now"
}) }}

Button input disabled

(open in a new window)
Code

Markup

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

Macro

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

{{ govukButton({
  "element": "input",
  "text": "Explicit input button disabled",
  "disabled": true
}) }}

Button prevent double click

(open in a new window)
Code

Markup

<button type="submit" data-prevent-double-click="true" class="govuk-button" data-module="govuk-button">
  Submit
</button>

Macro

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

{{ govukButton({
  "text": "Submit",
  "preventDoubleClick": true
}) }}

Button with active state

(open in a new window)

Simulate triggering the :active CSS pseudo-class, not available in the production build.

Code

Markup

<button name="active" type="submit" class="govuk-button :active" data-module="govuk-button">
  Active
</button>

Macro

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

{{ govukButton({
  "name": "active",
  "text": "Active",
  "classes": ":active"
}) }}

Button with hover state

(open in a new window)

Simulate triggering the :hover CSS pseudo-class, not available in the production build.

Code

Markup

<button name="hover" type="submit" class="govuk-button :hover" data-module="govuk-button">
  Hovered
</button>

Macro

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

{{ govukButton({
  "name": "hover",
  "text": "Hovered",
  "classes": ":hover"
}) }}

Button with focus state

(open in a new window)

Simulate triggering the :focus CSS pseudo-class, not available in the production build.

Code

Markup

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

Macro

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

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

Button Secondary

(open in a new window)

A button for secondary actions

Code

Markup

<button name="secondary" type="submit" class="govuk-button govuk-button--secondary" data-module="govuk-button">
  Secondary button
</button>

Macro

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

{{ govukButton({
  "name": "secondary",
  "text": "Secondary button",
  "classes": "govuk-button--secondary"
}) }}

Button Secondary disabled

(open in a new window)
Code

Markup

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

Macro

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

{{ govukButton({
  "name": "secondary",
  "text": "Secondary button disabled",
  "classes": "govuk-button--secondary",
  "disabled": true
}) }}
(open in a new window)

A link button for secondary actions

Code

Markup

<a href="/" role="button" draggable="false" class="govuk-button govuk-button--secondary" data-module="govuk-button">
  Secondary button
</a>

Macro

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

{{ govukButton({
  "name": "secondary",
  "text": "Secondary button",
  "href": "/",
  "classes": "govuk-button--secondary"
}) }}

A button for actions that need a warning

Code

Markup

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

Macro

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

{{ govukButton({
  "name": "Warning",
  "text": "Warning button",
  "classes": "govuk-button--warning"
}) }}

Button Warning disabled

(open in a new window)
Code

Markup

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

Macro

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

{{ govukButton({
  "name": "warning",
  "text": "Warning button disabled",
  "classes": "govuk-button--warning",
  "disabled": true
}) }}
(open in a new window)

A link button for actions that need a warning

Code

Markup

<a href="/" role="button" draggable="false" class="govuk-button govuk-button--warning" data-module="govuk-button">
  Warning button
</a>

Macro

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

{{ govukButton({
  "name": "Warning",
  "text": "Warning button",
  "href": "/",
  "classes": "govuk-button--warning"
}) }}