Components

• Button
• Cookie banner
• Filter
• Graph
• Highlight
• Notification
• Pagination
• Panel
• Rating
• Search form
• Search results
• Table
• Tabs
• Tag
• Time line

Button

An extension of GOVUK button with additional styling options.

Button inverted

This is a solid white button to be used on a blue background

Open this example in a new tab

HTML

<div class="govuk-panel das-panel--featured">
  <button class="govuk-button das-button--inverted" data-module="govuk-button">
    Button
  </button>
</div>

Button blue

Open this example in a new tab

HTML

<button class="govuk-button das-button--blue" data-module="govuk-button">
  Button
</button>

Button link

This button looks like a link but has similar padding to a conventional button and can therefore be used alongside them.

Open this example in a new tab

HTML

<button class="govuk-button" data-module="govuk-button">Submit</button>
<a href="#" class="das-button--link" data-module="govuk-button">Button</a>

Button inline link

This button can be used inline as part of a block of text.

Open this example in a new tab

HTML

<p class="govuk-body">
  This <button class="das-button--inline-link" data-module="govuk-button">inline link</button> is actually a button
  element.
</p>