ComponentButton

66 of 66 upstream examples match. Razor component: <NhsukButton>

Showing the examples from upstream's review app. Show 4 more test-only examples

Default

Matches upstream

Razor Pages and MVC

<nhsuk-button text="Save and continue" />

Blazor

<NhsukButton Text="Save and continue" />

Nunjucks (upstream)

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

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

Default, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Save and continue" small="true" />

Blazor

<NhsukButton Text="Save and continue" Small="true" />

Nunjucks (upstream)

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

{{ button({
  "text": "Save and continue",
  "small": true
}) }}

Disabled

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Disabled button" disabled="true" />

Blazor

<NhsukButton Text="Disabled button" Disabled="true" />

Nunjucks (upstream)

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

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

Disabled, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Disabled button" disabled="true" small="true" />

Blazor

<NhsukButton Text="Disabled button" Disabled="true" Small="true" />

Nunjucks (upstream)

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

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

Login

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Continue" variant="login" />

Blazor

<NhsukButton Text="Continue" Variant="login" />

Nunjucks (upstream)

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

{{ button({
  "text": "Continue",
  "variant": "login"
}) }}

Login as a link

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Continue" variant="login" href="#" />

Blazor

<NhsukButton Text="Continue" Variant="login" Href="#" />

Nunjucks (upstream)

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

{{ button({
  "text": "Continue",
  "variant": "login",
  "href": "#"
}) }}

Login as a link, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Continue"
    variant="login"
    small="true"
    href="#"
/>

Blazor

<NhsukButton
    Text="Continue"
    Variant="login"
    Small="true"
    Href="#"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Continue",
  "variant": "login",
  "small": true,
  "href": "#"
}) }}

Login disabled

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Continue" variant="login" disabled="true" />

Blazor

<NhsukButton Text="Continue" Variant="login" Disabled="true" />

Nunjucks (upstream)

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

{{ button({
  "text": "Continue",
  "variant": "login",
  "disabled": true
}) }}

Login disabled, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Continue"
    variant="login"
    disabled="true"
    small="true"
/>

Blazor

<NhsukButton
    Text="Continue"
    Variant="login"
    Disabled="true"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Continue",
  "variant": "login",
  "disabled": true,
  "small": true
}) }}

Login, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Continue" variant="login" small="true" />

Blazor

<NhsukButton Text="Continue" Variant="login" Small="true" />

Nunjucks (upstream)

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

{{ button({
  "text": "Continue",
  "variant": "login",
  "small": true
}) }}

Login with icon at end

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Next"
    variant="login"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
/>

Blazor

<NhsukButton
    Text="Next"
    Variant="login"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Next",
  "variant": "login",
  "icon": {
    "name": "arrow-right",
    "placement": "end"
  }
}) }}

Login with icon at end, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Next"
    variant="login"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
    small="true"
/>

Blazor

<NhsukButton
    Text="Next"
    Variant="login"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Next",
  "variant": "login",
  "icon": {
    "name": "arrow-right",
    "placement": "end"
  },
  "small": true
}) }}

Login with icon at start

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Previous"
    variant="login"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
/>

Blazor

<NhsukButton
    Text="Previous"
    Variant="login"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Previous",
  "variant": "login",
  "icon": {
    "name": "arrow-left",
    "placement": "start"
  }
}) }}

Login with icon at start, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Previous"
    variant="login"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
    small="true"
/>

Blazor

<NhsukButton
    Text="Previous"
    Variant="login"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Previous",
  "variant": "login",
  "icon": {
    "name": "arrow-left",
    "placement": "start"
  },
  "small": true
}) }}

Reverse

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Log out" variant="reverse" />

Blazor

<NhsukButton Text="Log out" Variant="reverse" />

Nunjucks (upstream)

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

{{ button({
  "text": "Log out",
  "variant": "reverse"
}) }}

Reverse as a link

Matches upstream

Open on its own page (opens in new tab)

Log out

Razor Pages and MVC

<nhsuk-button text="Log out" variant="reverse" href="#" />

Blazor

<NhsukButton Text="Log out" Variant="reverse" Href="#" />

Nunjucks (upstream)

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

{{ button({
  "text": "Log out",
  "variant": "reverse",
  "href": "#"
}) }}

Reverse as a link, small

Matches upstream

Open on its own page (opens in new tab)

Log out

Razor Pages and MVC

<nhsuk-button
    text="Log out"
    variant="reverse"
    small="true"
    href="#"
/>

Blazor

<NhsukButton
    Text="Log out"
    Variant="reverse"
    Small="true"
    Href="#"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Log out",
  "variant": "reverse",
  "small": true,
  "href": "#"
}) }}

Reverse disabled

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Log out" variant="reverse" disabled="true" />

Blazor

<NhsukButton Text="Log out" Variant="reverse" Disabled="true" />

Nunjucks (upstream)

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

{{ button({
  "text": "Log out",
  "variant": "reverse",
  "disabled": true
}) }}

Reverse disabled, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Log out"
    variant="reverse"
    disabled="true"
    small="true"
/>

Blazor

<NhsukButton
    Text="Log out"
    Variant="reverse"
    Disabled="true"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Log out",
  "variant": "reverse",
  "disabled": true,
  "small": true
}) }}

Reverse, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Log out" variant="reverse" small="true" />

Blazor

<NhsukButton Text="Log out" Variant="reverse" Small="true" />

Nunjucks (upstream)

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

{{ button({
  "text": "Log out",
  "variant": "reverse",
  "small": true
}) }}

Reverse with icon at end

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Next"
    variant="reverse"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
/>

Blazor

<NhsukButton
    Text="Next"
    Variant="reverse"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Next",
  "variant": "reverse",
  "icon": {
    "name": "arrow-right",
    "placement": "end"
  }
}) }}

Reverse with icon at end, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Next"
    variant="reverse"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
    small="true"
/>

Blazor

<NhsukButton
    Text="Next"
    Variant="reverse"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Next",
  "variant": "reverse",
  "icon": {
    "name": "arrow-right",
    "placement": "end"
  },
  "small": true
}) }}

Reverse with icon at start

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Previous"
    variant="reverse"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
/>

Blazor

<NhsukButton
    Text="Previous"
    Variant="reverse"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Previous",
  "variant": "reverse",
  "icon": {
    "name": "arrow-left",
    "placement": "start"
  }
}) }}

Reverse with icon at start, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Previous"
    variant="reverse"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
    small="true"
/>

Blazor

<NhsukButton
    Text="Previous"
    Variant="reverse"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Previous",
  "variant": "reverse",
  "icon": {
    "name": "arrow-left",
    "placement": "start"
  },
  "small": true
}) }}

Secondary

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Find my location" variant="secondary" />

Blazor

<NhsukButton Text="Find my location" Variant="secondary" />

Nunjucks (upstream)

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

{{ button({
  "text": "Find my location",
  "variant": "secondary"
}) }}

Secondary as a link

Matches upstream

Open on its own page (opens in new tab)

Find my location

Razor Pages and MVC

<nhsuk-button text="Find my location" variant="secondary" href="#" />

Blazor

<NhsukButton Text="Find my location" Variant="secondary" Href="#" />

Nunjucks (upstream)

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

{{ button({
  "text": "Find my location",
  "variant": "secondary",
  "href": "#"
}) }}

Secondary as a link, small

Matches upstream

Open on its own page (opens in new tab)

Find my location

Razor Pages and MVC

<nhsuk-button
    text="Find my location"
    variant="secondary"
    small="true"
    href="#"
/>

Blazor

<NhsukButton
    Text="Find my location"
    Variant="secondary"
    Small="true"
    Href="#"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Find my location",
  "variant": "secondary",
  "small": true,
  "href": "#"
}) }}

Secondary disabled

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Find my location" variant="secondary" disabled="true" />

Blazor

<NhsukButton Text="Find my location" Variant="secondary" Disabled="true" />

Nunjucks (upstream)

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

{{ button({
  "text": "Find my location",
  "variant": "secondary",
  "disabled": true
}) }}

Secondary disabled, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Find my location"
    variant="secondary"
    disabled="true"
    small="true"
/>

Blazor

<NhsukButton
    Text="Find my location"
    Variant="secondary"
    Disabled="true"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Find my location",
  "variant": "secondary",
  "disabled": true,
  "small": true
}) }}

Secondary, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Find my location" variant="secondary" small="true" />

Blazor

<NhsukButton Text="Find my location" Variant="secondary" Small="true" />

Nunjucks (upstream)

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

{{ button({
  "text": "Find my location",
  "variant": "secondary",
  "small": true
}) }}

Secondary, solid background

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Find my location" variant="secondary-solid" />

Blazor

<NhsukButton Text="Find my location" Variant="secondary-solid" />

Nunjucks (upstream)

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

{{ button({
  "text": "Find my location",
  "variant": "secondary-solid"
}) }}

Secondary, solid background as a link

Matches upstream

Open on its own page (opens in new tab)

Find my location

Razor Pages and MVC

<nhsuk-button text="Find my location" variant="secondary-solid" href="#" />

Blazor

<NhsukButton Text="Find my location" Variant="secondary-solid" Href="#" />

Nunjucks (upstream)

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

{{ button({
  "text": "Find my location",
  "variant": "secondary-solid",
  "href": "#"
}) }}

Secondary, solid background as a link, small

Matches upstream

Open on its own page (opens in new tab)

Find my location

Razor Pages and MVC

<nhsuk-button
    text="Find my location"
    variant="secondary-solid"
    small="true"
    href="#"
/>

Blazor

<NhsukButton
    Text="Find my location"
    Variant="secondary-solid"
    Small="true"
    Href="#"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Find my location",
  "variant": "secondary-solid",
  "small": true,
  "href": "#"
}) }}

Secondary, solid background disabled

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Find my location" variant="secondary-solid" disabled="true" />

Blazor

<NhsukButton Text="Find my location" Variant="secondary-solid" Disabled="true" />

Nunjucks (upstream)

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

{{ button({
  "text": "Find my location",
  "variant": "secondary-solid",
  "disabled": true
}) }}

Secondary, solid background disabled, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Find my location"
    variant="secondary-solid"
    disabled="true"
    small="true"
/>

Blazor

<NhsukButton
    Text="Find my location"
    Variant="secondary-solid"
    Disabled="true"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Find my location",
  "variant": "secondary-solid",
  "disabled": true,
  "small": true
}) }}

Secondary, solid background, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Find my location" variant="secondary-solid" small="true" />

Blazor

<NhsukButton Text="Find my location" Variant="secondary-solid" Small="true" />

Nunjucks (upstream)

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

{{ button({
  "text": "Find my location",
  "variant": "secondary-solid",
  "small": true
}) }}

Secondary, solid background with icon at end

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Next"
    variant="secondary-solid"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
/>

Blazor

<NhsukButton
    Text="Next"
    Variant="secondary-solid"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Next",
  "variant": "secondary-solid",
  "icon": {
    "name": "arrow-right",
    "placement": "end"
  }
}) }}

Secondary, solid background with icon at end, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Next"
    variant="secondary-solid"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
    small="true"
/>

Blazor

<NhsukButton
    Text="Next"
    Variant="secondary-solid"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Next",
  "variant": "secondary-solid",
  "icon": {
    "name": "arrow-right",
    "placement": "end"
  },
  "small": true
}) }}

Secondary, solid background with icon at start

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Previous"
    variant="secondary-solid"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
/>

Blazor

<NhsukButton
    Text="Previous"
    Variant="secondary-solid"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Previous",
  "variant": "secondary-solid",
  "icon": {
    "name": "arrow-left",
    "placement": "start"
  }
}) }}

Secondary, solid background with icon at start, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Previous"
    variant="secondary-solid"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
    small="true"
/>

Blazor

<NhsukButton
    Text="Previous"
    Variant="secondary-solid"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Previous",
  "variant": "secondary-solid",
  "icon": {
    "name": "arrow-left",
    "placement": "start"
  },
  "small": true
}) }}

Secondary with icon at end

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Next"
    variant="secondary"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
/>

Blazor

<NhsukButton
    Text="Next"
    Variant="secondary"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Next",
  "variant": "secondary",
  "icon": {
    "name": "arrow-right",
    "placement": "end"
  }
}) }}

Secondary with icon at end, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Next"
    variant="secondary"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
    small="true"
/>

Blazor

<NhsukButton
    Text="Next"
    Variant="secondary"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Next",
  "variant": "secondary",
  "icon": {
    "name": "arrow-right",
    "placement": "end"
  },
  "small": true
}) }}

Secondary with icon at start

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Previous"
    variant="secondary"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
/>

Blazor

<NhsukButton
    Text="Previous"
    Variant="secondary"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Previous",
  "variant": "secondary",
  "icon": {
    "name": "arrow-left",
    "placement": "start"
  }
}) }}

Secondary with icon at start, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Previous"
    variant="secondary"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
    small="true"
/>

Blazor

<NhsukButton
    Text="Previous"
    Variant="secondary"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Previous",
  "variant": "secondary",
  "icon": {
    "name": "arrow-left",
    "placement": "start"
  },
  "small": true
}) }}

Warning

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Yes, delete this vaccine" variant="warning" />

Blazor

<NhsukButton Text="Yes, delete this vaccine" Variant="warning" />

Nunjucks (upstream)

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

{{ button({
  "text": "Yes, delete this vaccine",
  "variant": "warning"
}) }}

Warning as a link

Matches upstream

Open on its own page (opens in new tab)

Yes, delete this vaccine

Razor Pages and MVC

<nhsuk-button text="Yes, delete this vaccine" variant="warning" href="#" />

Blazor

<NhsukButton Text="Yes, delete this vaccine" Variant="warning" Href="#" />

Nunjucks (upstream)

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

{{ button({
  "text": "Yes, delete this vaccine",
  "variant": "warning",
  "href": "#"
}) }}

Warning as a link, small

Matches upstream

Open on its own page (opens in new tab)

Yes, delete this vaccine

Razor Pages and MVC

<nhsuk-button
    text="Yes, delete this vaccine"
    small="true"
    variant="warning"
    href="#"
/>

Blazor

<NhsukButton
    Text="Yes, delete this vaccine"
    Small="true"
    Variant="warning"
    Href="#"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Yes, delete this vaccine",
  "small": true,
  "variant": "warning",
  "href": "#"
}) }}

Warning disabled

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Yes, delete this vaccine" variant="warning" disabled="true" />

Blazor

<NhsukButton Text="Yes, delete this vaccine" Variant="warning" Disabled="true" />

Nunjucks (upstream)

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

{{ button({
  "text": "Yes, delete this vaccine",
  "variant": "warning",
  "disabled": true
}) }}

Warning disabled, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Yes, delete this vaccine"
    variant="warning"
    small="true"
    disabled="true"
/>

Blazor

<NhsukButton
    Text="Yes, delete this vaccine"
    Variant="warning"
    Small="true"
    Disabled="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Yes, delete this vaccine",
  "variant": "warning",
  "small": true,
  "disabled": true
}) }}

Warning, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Yes, delete this vaccine" small="true" variant="warning" />

Blazor

<NhsukButton Text="Yes, delete this vaccine" Small="true" Variant="warning" />

Nunjucks (upstream)

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

{{ button({
  "text": "Yes, delete this vaccine",
  "small": true,
  "variant": "warning"
}) }}

Warning with icon at end

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Next"
    variant="warning"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
/>

Blazor

<NhsukButton
    Text="Next"
    Variant="warning"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Next",
  "variant": "warning",
  "icon": {
    "name": "arrow-right",
    "placement": "end"
  }
}) }}

Warning with icon at end, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Next"
    variant="warning"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
    small="true"
/>

Blazor

<NhsukButton
    Text="Next"
    Variant="warning"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Next",
  "variant": "warning",
  "icon": {
    "name": "arrow-right",
    "placement": "end"
  },
  "small": true
}) }}

Warning with icon at start

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Previous"
    variant="warning"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
/>

Blazor

<NhsukButton
    Text="Previous"
    Variant="warning"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Previous",
  "variant": "warning",
  "icon": {
    "name": "arrow-left",
    "placement": "start"
  }
}) }}

Warning with icon at start, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Previous"
    variant="warning"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
    small="true"
/>

Blazor

<NhsukButton
    Text="Previous"
    Variant="warning"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Previous",
  "variant": "warning",
  "icon": {
    "name": "arrow-left",
    "placement": "start"
  },
  "small": true
}) }}

With double click not prevented

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Save and continue" prevent-double-click="false" />

Blazor

<NhsukButton Text="Save and continue" PreventDoubleClick="false" />

Nunjucks (upstream)

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

{{ button({
  "text": "Save and continue",
  "preventDoubleClick": false
}) }}

With double click prevented

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button text="Save and continue" prevent-double-click="true" />

Blazor

<NhsukButton Text="Save and continue" PreventDoubleClick="true" />

Nunjucks (upstream)

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

{{ button({
  "text": "Save and continue",
  "preventDoubleClick": true
}) }}

With icon at end

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Next"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
/>

Blazor

<NhsukButton
    Text="Next"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Next",
  "icon": {
    "name": "arrow-right",
    "placement": "end"
  }
}) }}

With icon at end, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Next"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
    small="true"
/>

Blazor

<NhsukButton
    Text="Next"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-right",
        Placement = "end",
    })"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Next",
  "icon": {
    "name": "arrow-right",
    "placement": "end"
  },
  "small": true
}) }}

With icon at start

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Previous"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
/>

Blazor

<NhsukButton
    Text="Previous"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Previous",
  "icon": {
    "name": "arrow-left",
    "placement": "start"
  }
}) }}

With icon at start, small

Matches upstream

Open on its own page (opens in new tab)

Razor Pages and MVC

<nhsuk-button
    text="Previous"
    icon-options="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
    small="true"
/>

Blazor

<NhsukButton
    Text="Previous"
    Icon="@(new ButtonIconOptions
    {
        Name = "arrow-left",
        Placement = "start",
    })"
    Small="true"
/>

Nunjucks (upstream)

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

{{ button({
  "text": "Previous",
  "icon": {
    "name": "arrow-left",
    "placement": "start"
  },
  "small": true
}) }}

As a link

Matches upstream

Open on its own page (opens in new tab)

Link button

Razor Pages and MVC

<nhsuk-button text="Link button" href="#" />

Blazor

<NhsukButton Text="Link button" Href="#" />

Nunjucks (upstream)

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

{{ button({
  "text": "Link button",
  "href": "#"
}) }}

As a link, small

Matches upstream

Open on its own page (opens in new tab)

Link button

Razor Pages and MVC

<nhsuk-button text="Link button" small="true" href="#" />

Blazor

<NhsukButton Text="Link button" Small="true" Href="#" />

Nunjucks (upstream)

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

{{ button({
  "text": "Link button",
  "small": true,
  "href": "#"
}) }}