Feedback bar

Feedback bar with button

Open this example in a new tab

Code

Markup

<div class='govuk-feedback-bar'>
    <div class='govuk-feedback-bar__body'>
        <p class='govuk-feedback-bar__label'>
            <span>Boli tieto informácie pre vás užitočné?</span>
        </p>
        <div class='govuk-feedback-bar__actions'>
            <button name="secondary" class="govuk-button govuk-button" data-module="govuk-button" aria-label="Áno">
                Áno
            </button>
            <button name="secondary" class="govuk-button govuk-button--sec" data-module="govuk-button" aria-label="Nie">
                Nie
            </button>
        </div>

            <div class='govuk-feedback-bar__action'><button name="secondary" class="govuk-button govuk-button--sec" data-module="govuk-button" aria-label="Nahlásiť chybu">
      Nahlásiť chybu
    </button></div>
    </div>
</div>

Macro

{% from "govuk/components/feedback-bar/macro.njk" import govukFeedbackBar %}

{{ govukFeedbackBar({
  label: "Boli tieto informácie pre vás užitočné?",
  action:
    '<button name="secondary" class="govuk-button govuk-button--sec" data-module="govuk-button" aria-label="Nahlásiť chybu">\n' +
    "  Nahlásiť chybu\n" +
    "</button>\n"
}) }}

Feedback bar without button

Open this example in a new tab

Code

Markup

<div class='govuk-feedback-bar'>
    <div class='govuk-feedback-bar__body'>
        <p class='govuk-feedback-bar__label'>
            <span>Boli tieto informácie pre vás užitočné?</span>
        </p>
        <div class='govuk-feedback-bar__actions'>
            <button name="secondary" class="govuk-button govuk-button" data-module="govuk-button" aria-label="Áno">
                Áno
            </button>
            <button name="secondary" class="govuk-button govuk-button--sec" data-module="govuk-button" aria-label="Nie">
                Nie
            </button>
        </div>

    </div>
</div>

Macro

{% from "govuk/components/feedback-bar/macro.njk" import govukFeedbackBar %}

{{ govukFeedbackBar({
  label: "Boli tieto informácie pre vás užitočné?"
}) }}

Feedback bar submitted

Open this example in a new tab

Code

Markup

<div class='govuk-feedback-bar'>
    <div class='govuk-feedback-bar__body'>
        <p class='govuk-feedback-bar__label'>
                <span class='govuk-feedback-bar__check'>
                    <span class="material-icons" aria-hidden="true">check</span>
                </span>
            <span>Ďakujeme za Váš čas a hodnotenie! Vaša spätná väzba nám pomáha vylepšovať kvalitu portálu.</span>
        </p>

            <div class='govuk-feedback-bar__action'><button name="secondary" class="govuk-button govuk-button--sec" data-module="govuk-button" aria-label="Nahlásiť chybu">
      Nahlásiť chybu
    </button></div>
    </div>
</div>

Macro

{% from "govuk/components/feedback-bar/macro.njk" import govukFeedbackBar %}

{{ govukFeedbackBar({
  label:
    "Ďakujeme za Váš čas a hodnotenie! Vaša spätná väzba nám pomáha vylepšovať kvalitu portálu.",
  success: true,
  action:
    '<button name="secondary" class="govuk-button govuk-button--sec" data-module="govuk-button" aria-label="Nahlásiť chybu">\n' +
    "  Nahlásiť chybu\n" +
    "</button>\n"
}) }}