Skip to main content Skip to list of components
Beta

This is a new service – give us your feedback to help improve it.

Components

Button

The button component can be used as a call to action link or as a button element for use within forms.

Contents

  1. Status
  2. Icons
  3. Button groups

The button component can be used as a call to action 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 prefixed fa-.
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: "#"
}) }}

Status

Status
Ready for production
Tested without CSS
Yes
WCAG 2.2 AA compliant
Yes
Analytics integrated
In development
Documentation complete
No

Icons

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

Button groups

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

Open this example in new tab

HTML 

<h1 class="tna-heading-xl">Item 42</h1>
<div class="tna-button-group">
  <a href="#/edit" class="tna-button" aria-label="Edit item 42" title="Edit item 42">
    Edit
  </a>
  <a href="#/share" class="tna-button" aria-label="Share a link to item 42" title="Share a link to item 42">
    Share
  </a>
  <a href="#/delete" class="tna-button tna-button--accent" aria-label="Delete item 42" title="Delete item 42">
    Delete
  </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 prefixed fa-.
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 %}

<h1 class="tna-heading-xl">Item 42</h1>
<div class="tna-button-group">
  {{ tnaButton({
    text: "Edit",
    title: "Edit item 42",
    href: "#/edit"
  }) }}
  {{ tnaButton({
    text: "Share",
    title: "Share a link to item 42",
    href: "#/share"
  }) }}
  {{ tnaButton({
    text: "Delete",
    title: "Delete item 42",
    accent: true,
    href: "#/delete"
  }) }}
</div>

Back to top