Button - Tlačidlo

Tlačidlo

Otvoriť príklad na novej záložke

Code

Markup

<button type="submit" class="govuk-button govuk-button__basic" data-module="govuk-button">
  Primary button
</button>

Macro

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

{{ govukButton({
  text: "Primary button",
  classes: "govuk-button__basic"
}) }}

Tlačidlo input

Otvoriť príklad na novej záložke

Code

Markup

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

Macro

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

{{ govukButton({
  element: "input",
  text: "Primary button",
  classes: "govuk-button__basic"
}) }}

Tlačidlo with active state

Otvoriť príklad na novej záložke

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

Code

Markup

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

Macro

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

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

Tlačidlo input disabled

Otvoriť príklad na novej záložke

Code

Markup

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

Macro

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

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

Tlačidlo successfully

Otvoriť príklad na novej záložke

Code

Markup

<button type="submit" class="govuk-button govuk-button__success" data-module="govuk-button">
  Successfully button
</button>

Macro

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

{{ govukButton({
  text: "Successfully button",
  classes: "govuk-button__success"
}) }}

Tlačidlo warning

Otvoriť príklad na novej záložke

Code

Markup

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

Macro

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

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

Tlačidlo disabled

Otvoriť príklad na novej záložke

Code

Markup

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

Macro

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

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

Tlačidlo with hover state

Otvoriť príklad na novej záložke

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

Code

Markup

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

Macro

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

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

Tlačidlo with focus state

Otvoriť príklad na novej záložke

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

Code

Markup

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

Macro

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

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

Tlačidlo large

Otvoriť príklad na novej záložke

Large button

Code

Markup

<button type="submit" name="Button Large" class="govuk-button govuk-button__large" data-module="govuk-button">
  Button Large
</button>

Macro

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

{{ govukButton({
  name: "Button Large",
  text: "Button Large",
  classes: "govuk-button__large"
}) }}

Tlačidlo secondary

Otvoriť príklad na novej záložke

A button for secondary actions

Code

Markup

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

Macro

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

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

Tlačidlo secondary success

Otvoriť príklad na novej záložke

Code

Markup

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

Macro

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

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

Tlačidlo secondary warning

Otvoriť príklad na novej záložke

Code

Markup

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

Macro

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

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

Tlačidlo secondary disabled

Otvoriť príklad na novej záložke

Code

Markup

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

Macro

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

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

Tlačidlo secondary link

Otvoriť príklad na novej záložke

A link button for secondary actions

Code

Markup

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

Macro

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

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

Tlačidlo warning

Otvoriť príklad na novej záložke

A button for actions that need a warning

Code

Markup

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

Macro

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

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

Tlačidlo warning disabled

Otvoriť príklad na novej záložke

Code

Markup

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

Macro

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

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

Tlačidlo texted btn

Otvoriť príklad na novej záložke

Code

Markup

<button type="submit" name="Texted" class="govuk-button govuk-button--texted" data-module="govuk-button">
  Texted btn
</button>

Macro

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

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

Tlačidlo texted btn success

Otvoriť príklad na novej záložke

Code

Markup

<button type="submit" name="Texted btn success" class="govuk-button govuk-button--texted govuk-button--texted__success" data-module="govuk-button">
  Texted btn success
</button>

Macro

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

{{ govukButton({
  name: "Texted btn success",
  text: "Texted btn success",
  classes: "govuk-button--texted govuk-button--texted__success"
}) }}

Tlačidlo texted btn warning

Otvoriť príklad na novej záložke

Code

Markup

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

Macro

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

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

Tlačidlo texted btn disabled

Otvoriť príklad na novej záložke

Code

Markup

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

Macro

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

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

Tlačidlo texted btn success disabled

Otvoriť príklad na novej záložke

Code

Markup

<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">
  Texted btn success
</button>

Macro

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

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

Tlačidlo texted btn warning disabled

Otvoriť príklad na novej záložke

Code

Markup

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

Macro

{% 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
}) }}