Components

Button

Use the button component for call to action links or to submit data within forms.

Variations
Button elements
Button groups

The button component can be used as a call to action link on the page instead of a plain text link or as a <button> element for use within forms.

Open this example in new tab

HTML

<a href="#" class="tna-button">
  Button
</a>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
text	string	The text of the button.
html	string	The HTML to use as the text of the button. Setting this overwrites the `text` property.
href	string	A URL to use as a link for the button.
title	string	A title attribute for the button.
icon	string	The name of a Font Awesome icon, without the `fa-` prefix.
iconSvg	string	The SVG to use as the icon. Setting this overwrites the `icon` property.
accent	boolean	If true, set the colour of the button to the page’s accent colour.
small	boolean	If true, make the button smaller.
plain	boolean	If true, remove the background colour of the button and make it look more like a link.
iconOnly	boolean	If true, don’t show the text of the button.
iconOnlyOnMobile	boolean	If true, show both the text and icon on larger devices but only show the icon on smaller devices.
rightAlignIcon	boolean	If true, align the icon to the right hand side of the button.
buttonElement	boolean	If true, use a `<button>` element for the button. This makes the `href` attribute redundant.
buttonType	string	Set the type of button element if `buttonElement` is true.
classes	string	Classes to add to the button.
attributes	object	HTML attributes (for example data attributes) to add to the button.

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

{{ tnaButton({
  text: "Button",
  href: "#"
}) }}

Variations

Accent

An accented button will inherit the accent colour from the page

Avoid overwhelming the user by using accented buttons sparingly.

Open this example in new tab

HTML

<a href="#" class="tna-button tna-button--accent">
  Accent button
</a>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
text	string	The text of the button.
html	string	The HTML to use as the text of the button. Setting this overwrites the `text` property.
href	string	A URL to use as a link for the button.
title	string	A title attribute for the button.
icon	string	The name of a Font Awesome icon, without the `fa-` prefix.
iconSvg	string	The SVG to use as the icon. Setting this overwrites the `icon` property.
accent	boolean	If true, set the colour of the button to the page’s accent colour.
small	boolean	If true, make the button smaller.
plain	boolean	If true, remove the background colour of the button and make it look more like a link.
iconOnly	boolean	If true, don’t show the text of the button.
iconOnlyOnMobile	boolean	If true, show both the text and icon on larger devices but only show the icon on smaller devices.
rightAlignIcon	boolean	If true, align the icon to the right hand side of the button.
buttonElement	boolean	If true, use a `<button>` element for the button. This makes the `href` attribute redundant.
buttonType	string	Set the type of button element if `buttonElement` is true.
classes	string	Classes to add to the button.
attributes	object	HTML attributes (for example data attributes) to add to the button.

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

{{ tnaButton({
  text: "Accent button",
  href: "#",
  accent: true
}) }}

Plain

Use plain buttons to provide the same size and spacing as other buttons but with a more subtle visual style.

Open this example in new tab

HTML

<a href="#" class="tna-button tna-button--plain">
  Plain button
</a>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
text	string	The text of the button.
html	string	The HTML to use as the text of the button. Setting this overwrites the `text` property.
href	string	A URL to use as a link for the button.
title	string	A title attribute for the button.
icon	string	The name of a Font Awesome icon, without the `fa-` prefix.
iconSvg	string	The SVG to use as the icon. Setting this overwrites the `icon` property.
accent	boolean	If true, set the colour of the button to the page’s accent colour.
small	boolean	If true, make the button smaller.
plain	boolean	If true, remove the background colour of the button and make it look more like a link.
iconOnly	boolean	If true, don’t show the text of the button.
iconOnlyOnMobile	boolean	If true, show both the text and icon on larger devices but only show the icon on smaller devices.
rightAlignIcon	boolean	If true, align the icon to the right hand side of the button.
buttonElement	boolean	If true, use a `<button>` element for the button. This makes the `href` attribute redundant.
buttonType	string	Set the type of button element if `buttonElement` is true.
classes	string	Classes to add to the button.
attributes	object	HTML attributes (for example data attributes) to add to the button.

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

{{ tnaButton({
  text: "Plain button",
  href: "#",
  plain: true
}) }}

Small

Smaller buttons can be used when space is limited, such as in admin interfaces.

Open this example in new tab

HTML

<a href="#" class="tna-button tna-button--small">
  Button
</a>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
text	string	The text of the button.
html	string	The HTML to use as the text of the button. Setting this overwrites the `text` property.
href	string	A URL to use as a link for the button.
title	string	A title attribute for the button.
icon	string	The name of a Font Awesome icon, without the `fa-` prefix.
iconSvg	string	The SVG to use as the icon. Setting this overwrites the `icon` property.
accent	boolean	If true, set the colour of the button to the page’s accent colour.
small	boolean	If true, make the button smaller.
plain	boolean	If true, remove the background colour of the button and make it look more like a link.
iconOnly	boolean	If true, don’t show the text of the button.
iconOnlyOnMobile	boolean	If true, show both the text and icon on larger devices but only show the icon on smaller devices.
rightAlignIcon	boolean	If true, align the icon to the right hand side of the button.
buttonElement	boolean	If true, use a `<button>` element for the button. This makes the `href` attribute redundant.
buttonType	string	Set the type of button element if `buttonElement` is true.
classes	string	Classes to add to the button.
attributes	object	HTML attributes (for example data attributes) to add to the button.

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

{{ tnaButton({
  text: "Button",
  href: "#",
  small: true
}) }}

Icons

Buttons can contain icons. Read more about using icons in TNA services.

Icons can be used on either the left or right of the button. The default alignment is to the left.

The set of icons available by default is Font Awesome's free classic icons. You can set the icon parameter by using the Font Awesome icon name, for example "chevron-left" or "heart".

Open this example in new tab

HTML

<div class="tna-button-group">
  <a href="#" class="tna-button">
    <i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
    Button with icon
  </a>
  <a href="#" class="tna-button tna-button--icon-right">
    <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
    Button with icon on right
  </a>
  <a href="#" class="tna-button tna-button--plain">
    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
    Plain button with icon
  </a>
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
text	string	The text of the button.
html	string	The HTML to use as the text of the button. Setting this overwrites the `text` property.
href	string	A URL to use as a link for the button.
title	string	A title attribute for the button.
icon	string	The name of a Font Awesome icon, without the `fa-` prefix.
iconSvg	string	The SVG to use as the icon. Setting this overwrites the `icon` property.
accent	boolean	If true, set the colour of the button to the page’s accent colour.
small	boolean	If true, make the button smaller.
plain	boolean	If true, remove the background colour of the button and make it look more like a link.
iconOnly	boolean	If true, don’t show the text of the button.
iconOnlyOnMobile	boolean	If true, show both the text and icon on larger devices but only show the icon on smaller devices.
rightAlignIcon	boolean	If true, align the icon to the right hand side of the button.
buttonElement	boolean	If true, use a `<button>` element for the button. This makes the `href` attribute redundant.
buttonType	string	Set the type of button element if `buttonElement` is true.
classes	string	Classes to add to the button.
attributes	object	HTML attributes (for example data attributes) to add to the button.

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

<div class="tna-button-group">
  {{ tnaButton({
    text: "Button with icon",
    href: "#",
    icon: "arrow-left"
  }) }}
  {{ tnaButton({
    text: "Button with icon on right",
    href: "#",
    icon: "arrow-right",
    rightAlignIcon: true
  }) }}
  {{ tnaButton({
    text: "Plain button with icon",
    href: "#",
    icon: "xmark",
    plain: true
  }) }}
</div>

Icon-only buttons

Use icon-only buttons in services with expert users who understand the interface well enough.

Icon-only buttons still need descriptive text and might benefit from a title to provide extra information when hovered.

You can choose to either only show an icon-only button or to show the button text on larger devices and then only the icon on smaller devices. This can be controlled with either iconOnly or iconOnlyOnMobile.

Avoid using plain icon-only buttons as they might not have a distinct enough hover or focus state.

Open this example in new tab

HTML

<div class="tna-button-group">
  <a href="#" class="tna-button tna-button--icon-only" aria-label="Add to favourites" title="Add to favourites">
    <i class="fa-solid fa-heart" aria-hidden="true"></i>
    Icon-only button
  </a>
  <a href="#" class="tna-button tna-button--icon-only-mobile" aria-label="Add to favourites" title="Add to favourites">
    <i class="fa-solid fa-heart" aria-hidden="true"></i>
    Icon-only button on mobile
  </a>
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
text	string	The text of the button.
html	string	The HTML to use as the text of the button. Setting this overwrites the `text` property.
href	string	A URL to use as a link for the button.
title	string	A title attribute for the button.
icon	string	The name of a Font Awesome icon, without the `fa-` prefix.
iconSvg	string	The SVG to use as the icon. Setting this overwrites the `icon` property.
accent	boolean	If true, set the colour of the button to the page’s accent colour.
small	boolean	If true, make the button smaller.
plain	boolean	If true, remove the background colour of the button and make it look more like a link.
iconOnly	boolean	If true, don’t show the text of the button.
iconOnlyOnMobile	boolean	If true, show both the text and icon on larger devices but only show the icon on smaller devices.
rightAlignIcon	boolean	If true, align the icon to the right hand side of the button.
buttonElement	boolean	If true, use a `<button>` element for the button. This makes the `href` attribute redundant.
buttonType	string	Set the type of button element if `buttonElement` is true.
classes	string	Classes to add to the button.
attributes	object	HTML attributes (for example data attributes) to add to the button.

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

<div class="tna-button-group">
  {{ tnaButton({
    text: "Icon-only button",
    href: "#",
    title: "Add to favourites",
    icon: "heart",
    iconOnly: true
  }) }}
  {{ tnaButton({
    text: "Icon-only button on mobile",
    href: "#",
    title: "Add to favourites",
    icon: "heart",
    iconOnlyOnMobile: true
  }) }}
</div>

SVG icons

To avoid relying on the Font Awesome CSS and font files, you can embed SVGs directly into the button using iconSvg.

Remember to escape quotes (" or ') in the SVG correctly.

Add aria-hidden="true" and focusable="false" to avoid the icon being read by screen readers. Include a wdith parameter if possible to avoid the icon being too large when viewed without CSS.

Open this example in new tab

HTML

<a href="#" class="tna-button">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
    <path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z" />
  </svg>
  Button with SVG icon
</a>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
text	string	The text of the button.
html	string	The HTML to use as the text of the button. Setting this overwrites the `text` property.
href	string	A URL to use as a link for the button.
title	string	A title attribute for the button.
icon	string	The name of a Font Awesome icon, without the `fa-` prefix.
iconSvg	string	The SVG to use as the icon. Setting this overwrites the `icon` property.
accent	boolean	If true, set the colour of the button to the page’s accent colour.
small	boolean	If true, make the button smaller.
plain	boolean	If true, remove the background colour of the button and make it look more like a link.
iconOnly	boolean	If true, don’t show the text of the button.
iconOnlyOnMobile	boolean	If true, show both the text and icon on larger devices but only show the icon on smaller devices.
rightAlignIcon	boolean	If true, align the icon to the right hand side of the button.
buttonElement	boolean	If true, use a `<button>` element for the button. This makes the `href` attribute redundant.
buttonType	string	Set the type of button element if `buttonElement` is true.
classes	string	Classes to add to the button.
attributes	object	HTML attributes (for example data attributes) to add to the button.

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

{{ tnaButton({
  text: "Button with SVG icon",
  href: "#",
  iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="24" aria-hidden="true" focusable="false"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>'
}) }}

Disabled buttons

Because disabled buttons can confuse some users, they have been intentionally omitted from this design system. Avoid them if possible.

Only use disabled buttons if research with users shows their use makes the user interface easier to understand.

Button elements

Set buttonElement to true to change the button to an HTML <button> element.

The default HTML button type is button. This can be changed to either submit or reset with the buttonType attribute.

Open this example in new tab

HTML

<div class="tna-button-group">
  <button class="tna-button" type="button">
    Button
  </button>
  <button class="tna-button" type="reset">
    Reset button
  </button>
  <button class="tna-button" type="submit">
    Submit button
  </button>
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
text	string	The text of the button.
html	string	The HTML to use as the text of the button. Setting this overwrites the `text` property.
href	string	A URL to use as a link for the button.
title	string	A title attribute for the button.
icon	string	The name of a Font Awesome icon, without the `fa-` prefix.
iconSvg	string	The SVG to use as the icon. Setting this overwrites the `icon` property.
accent	boolean	If true, set the colour of the button to the page’s accent colour.
small	boolean	If true, make the button smaller.
plain	boolean	If true, remove the background colour of the button and make it look more like a link.
iconOnly	boolean	If true, don’t show the text of the button.
iconOnlyOnMobile	boolean	If true, show both the text and icon on larger devices but only show the icon on smaller devices.
rightAlignIcon	boolean	If true, align the icon to the right hand side of the button.
buttonElement	boolean	If true, use a `<button>` element for the button. This makes the `href` attribute redundant.
buttonType	string	Set the type of button element if `buttonElement` is true.
classes	string	Classes to add to the button.
attributes	object	HTML attributes (for example data attributes) to add to the button.

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

<div class="tna-button-group">
  {{ tnaButton({
    text: "Button",
    buttonElement: true
  }) }}
  {{ tnaButton({
    text: "Reset button",
    buttonElement: true,
    buttonType: "reset"
  }) }}
  {{ tnaButton({
    text: "Submit button",
    buttonElement: true,
    buttonType: "submit"
  }) }}
</div>

Button groups

Use a button group (tna-button-group) to display buttons alongside one another. The buttons will stack on smaller screens.

Add tna-button-group--small to make all buttons in the group smaller for dense interfaces.

Open this example in new tab

HTML

<div class="tna-button-group">
  <a href="#" class="tna-button">
    Assign
  </a>
  <a href="#" class="tna-button">
    Reset
  </a>
  <a href="#" class="tna-button tna-button--accent tna-button--icon-right">
    <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
    Continue
  </a>
  <a href="#" class="tna-button tna-button--plain">
    Ignore
  </a>
</div>
<div class="tna-button-group tna-button-group--small">
  <a href="#" class="tna-button">
    Assign
  </a>
  <a href="#" class="tna-button">
    Reset
  </a>
  <a href="#" class="tna-button tna-button--accent tna-button--icon-right">
    <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
    Continue
  </a>
  <a href="#" class="tna-button tna-button--plain">
    Ignore
  </a>
</div>

Nunjucks

Nunjucks options

Primary options
Name	Type	Description
text	string	The text of the button.
html	string	The HTML to use as the text of the button. Setting this overwrites the `text` property.
href	string	A URL to use as a link for the button.
title	string	A title attribute for the button.
icon	string	The name of a Font Awesome icon, without the `fa-` prefix.
iconSvg	string	The SVG to use as the icon. Setting this overwrites the `icon` property.
accent	boolean	If true, set the colour of the button to the page’s accent colour.
small	boolean	If true, make the button smaller.
plain	boolean	If true, remove the background colour of the button and make it look more like a link.
iconOnly	boolean	If true, don’t show the text of the button.
iconOnlyOnMobile	boolean	If true, show both the text and icon on larger devices but only show the icon on smaller devices.
rightAlignIcon	boolean	If true, align the icon to the right hand side of the button.
buttonElement	boolean	If true, use a `<button>` element for the button. This makes the `href` attribute redundant.
buttonType	string	Set the type of button element if `buttonElement` is true.
classes	string	Classes to add to the button.
attributes	object	HTML attributes (for example data attributes) to add to the button.

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

<div class="tna-button-group">
  {{ tnaButton({
    text: "Assign",
    href: "#"
  }) }}
  {{ tnaButton({
    text: "Reset",
    href: "#"
  }) }}
  {{ tnaButton({
    text: "Continue",
    href: "#",
    accent: true,
    icon: "chevron-right",
    rightAlignIcon: true
  }) }}
  {{ tnaButton({
    text: "Ignore",
    href: "#",
    plain: true
  }) }}
</div>
<div class="tna-button-group tna-button-group--small">
  {{ tnaButton({
    text: "Assign",
    href: "#"
  }) }}
  {{ tnaButton({
    text: "Reset",
    href: "#"
  }) }}
  {{ tnaButton({
    text: "Continue",
    href: "#",
    accent: true,
    icon: "chevron-right",
    rightAlignIcon: true
  }) }}
  {{ tnaButton({
    text: "Ignore",
    href: "#",
    plain: true
  }) }}
</div>

This website uses cookies

Button

Contents

HTML

Nunjucks

Variations

Accent

HTML

Nunjucks

Plain

HTML

Nunjucks

Small

HTML

Nunjucks

Icons

HTML

Nunjucks

Icon-only buttons

HTML

Nunjucks

SVG icons

HTML

Nunjucks

Disabled buttons

Button elements

HTML

Nunjucks

Button groups

HTML

Nunjucks