@utrecht/component-library-css 1.0.0-alpha.208 → 1.0.0-alpha.209

package/dist/bem.css

@@ -342,7 +342,7 @@ ol.utrecht-breadcrumb__list {
  * Copyright (c) 2021 Robbert Broersma
  */
 /* stylelint-disable-next-line block-no-empty */
-.utrecht-button {
+.utrecht-button, .utrecht-button-link {
   background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
   border-color: var(--utrecht-button-border-color, transparent);
   border-radius: var(--utrecht-button-border-radius);
@@ -380,7 +380,7 @@ ol.utrecht-breadcrumb__list {
   cursor: var(--utrecht-action-busy-cursor);
 }
 
-.utrecht-button:disabled,
+.utrecht-button:disabled, .utrecht-button-link:disabled,
 .utrecht-button--disabled {
   background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
   border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
@@ -388,14 +388,14 @@ ol.utrecht-breadcrumb__list {
   cursor: var(--utrecht-action-disabled-cursor);
 }
 
-.utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-button--active {
   background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
   border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
   color: var(--utrecht-button-active-color, var(--utrecht-button-color));
 }
 
-.utrecht-button--focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+.utrecht-button--focus-visible, .utrecht-button-link--focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
   /* the pseudo-class for `:focus-visible` is implemented via the mixin */
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -404,7 +404,7 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
-.utrecht-button--focus, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+.utrecht-button--focus, .utrecht-button-link--focus, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
   background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
   border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
   color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
@@ -412,14 +412,15 @@ ol.utrecht-breadcrumb__list {
 
 /* override the `:focus` selector above */
 /* stylelint-disable-next-line no-descending-specificity */
-.utrecht-button:focus:not(:focus-visible) {
+.utrecht-button:focus:not(:focus-visible), .utrecht-button-link:focus:not(:focus-visible) {
   /* undo focus ring */
   box-shadow: none;
   outline-style: none;
 }
 
-.utrecht-button--hover:not(:disabled),
-.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+.utrecht-button--hover:not(:disabled), .utrecht-button-link--hover:not(:disabled),
+.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button-link:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
   background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
   border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
   color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
@@ -460,6 +461,112 @@ ol.utrecht-breadcrumb__list {
   gap: var(--utrecht-button-group-block-gap, 1em);
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-button, .utrecht-button-link {
+  background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-border-color, transparent);
+  border-radius: var(--utrecht-button-border-radius);
+  border-style: solid;
+  border-width: var(--utrecht-button-border-width, 0);
+  color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
+  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
+  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
+  font-weight: var(--utrecht-button-font-weight);
+  inline-size: var(--utrecht-button-inline-size, auto);
+  letter-spacing: var(--utrecht-button-letter-spacing);
+  min-block-size: var(--utrecht-button-min-block-size, auto);
+  min-inline-size: var(--utrecht-button-min-inline-size, 0);
+  padding-block-end: var(--utrecht-button-padding-block-end);
+  padding-block-start: var(--utrecht-button-padding-block-start);
+  padding-inline-end: var(--utrecht-button-padding-inline-end);
+  padding-inline-start: var(--utrecht-button-padding-inline-start);
+  text-transform: var(--utrecht-button-text-transform);
+  user-select: none;
+}
+
+.utrecht-button--distanced {
+  margin-block-end: var(--utrecht-button-margin-block-end);
+  margin-block-start: var(--utrecht-button-margin-block-start);
+  margin-inline-end: var(--utrecht-button-margin-inline-end);
+  margin-inline-start: var(--utrecht-button-margin-inline-start);
+}
+
+.utrecht-button--submit {
+  /* lower priority specificty than busy and disabled cursor */
+  cursor: var(--utrecht-action-submit-cursor);
+}
+
+.utrecht-button--busy {
+  cursor: var(--utrecht-action-busy-cursor);
+}
+
+.utrecht-button:disabled, .utrecht-button-link:disabled,
+.utrecht-button--disabled {
+  background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
+.utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button--active {
+  background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-active-color, var(--utrecht-button-color));
+}
+
+.utrecht-button--focus-visible, .utrecht-button-link--focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-button--focus, .utrecht-button-link--focus, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
+}
+
+/* override the `:focus` selector above */
+/* stylelint-disable-next-line no-descending-specificity */
+.utrecht-button:focus:not(:focus-visible), .utrecht-button-link:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+.utrecht-button--hover:not(:disabled), .utrecht-button-link--hover:not(:disabled),
+.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button-link:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
+  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
+}
+
+.utrecht-button-link {
+  cursor: var(--utrecht-action-navigate-cursor, pointer);
+  text-decoration: none;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -1230,6 +1337,170 @@ ol.utrecht-breadcrumb__list {
   height: 1em;
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/* stylelint-disable scss/no-global-function-names */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/*
+
+# CSS implementation
+
+## `text-decoration-skip`
+
+`text-decoration-skip` can be helpful to avoid making some texts unreadable.
+For example by obscuring Arabic diacritics.
+
+However, the combination of a greater thickness and skipping this thick underline
+leads to a very unappealing rendering of the underline. To avoid this,
+`text-decoration-skip` is disabled for interactive states.
+
+For design token configurations that have identical thickness for normal and interactive
+states, this will lead to the (undesirable) effect that the focus/hover effect is switching
+from an interrupted to an uninterrupted underline (for some texts).
+
+Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
+
+---
+
+Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
+that moving the pointer away from a link or having focus elsewhere first is simple enough to
+not make this too inconvenient.
+
+---
+
+Some folks implement the underline of links using `border-bottom` or even using a finely crafted
+`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
+would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
+
+## `text-decoration-thickness`
+
+Varying `text-decoration-thickness` can be used to distinguish interactive states.
+
+---
+
+`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
+In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
+the underline offset also seems to increase along with the thickness, which effectively means
+the underline is closer to the next line than in Safari.
+
+---
+
+It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
+use the `max()` function to ensure the underline remains visible for every font size.
+
+## `transition`
+
+`text-decoration-thickness` could be a candidate for animating between interactive states,
+however browsers don't seem to have implemented great looking supixel tweening yet.
+
+`text-decoration-skip` also makes the transition more challenging to implement.
+
+*/
+.utrecht-link, .utrecht-link-button {
+  color: var(--utrecht-link-color, blue);
+  text-decoration: var(--utrecht-link-text-decoration, underline);
+  text-decoration-skip-ink: all;
+  text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
+  text-underline-offset: var(--utrecht-link-text-underline-offset);
+}
+
+.utrecht-link--icon-left {
+  background-image: var(--utrecht-link-icon-left-background-image, none);
+  background-position: 0 0.25em;
+  background-repeat: no-repeat;
+  color: var(--utrecht-link-color, blue);
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  padding-inline-start: var(--utrecht-space-block-md);
+  text-decoration: none;
+}
+
+.utrecht-link:visited, .utrecht-link-button:visited,
+.utrecht-link--visited {
+  color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
+}
+
+.utrecht-link:hover, .utrecht-link-button:hover,
+.utrecht-link--hover,
+.utrecht-link-button--hover {
+  color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
+  text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
+}
+
+.utrecht-link:active, .utrecht-link-button:active,
+.utrecht-link--active,
+.utrecht-link-button--active {
+  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
+}
+
+.utrecht-link--focus, .utrecht-link-button--focus, .utrecht-link:focus, .utrecht-link-button:focus {
+  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
+  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
+}
+
+.utrecht-link--focus-visible, .utrecht-link-button--focus-visible, .utrecht-link:focus, .utrecht-link-button:focus {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-link:focus:not(:focus-visible), .utrecht-link-button:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-link--telephone {
+  white-space: nowrap;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-link-button {
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
+  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
+  font-weight: var(--utrecht-button-font-weight);
+  inline-size: var(--utrecht-button-inline-size, auto);
+  letter-spacing: var(--utrecht-button-letter-spacing);
+  min-block-size: var(--utrecht-button-min-block-size, auto);
+  min-inline-size: var(--utrecht-button-min-inline-size, 0);
+  padding-block-end: var(--utrecht-button-padding-block-end);
+  padding-block-start: var(--utrecht-button-padding-block-start);
+  padding-inline-end: var(--utrecht-button-padding-inline-end);
+  padding-inline-start: var(--utrecht-button-padding-inline-start);
+  text-transform: var(--utrecht-button-text-transform);
+  user-select: none;
+}
+
+.utrecht-link-button--html-button {
+  background-color: transparent;
+  /* reset <button> styling */
+  border-width: 0;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
@@ -1316,7 +1587,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 `text-decoration-skip` also makes the transition more challenging to implement.
 
 */
-.utrecht-link {
+.utrecht-link, .utrecht-link-button {
   color: var(--utrecht-link-color, blue);
   text-decoration: var(--utrecht-link-text-decoration, underline);
   text-decoration-skip-ink: all;
@@ -1334,13 +1605,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration: none;
 }
 
-.utrecht-link:visited,
+.utrecht-link:visited, .utrecht-link-button:visited,
 .utrecht-link--visited {
   color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
 }
 
-.utrecht-link:hover,
-.utrecht-link--hover {
+.utrecht-link:hover, .utrecht-link-button:hover,
+.utrecht-link--hover,
+.utrecht-link-button--hover {
   color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip: none;
@@ -1348,12 +1620,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link:active,
-.utrecht-link--active {
+.utrecht-link:active, .utrecht-link-button:active,
+.utrecht-link--active,
+.utrecht-link-button--active {
   color: var(--utrecht-link-active-color, var(--utrecht-link-color));
 }
 
-.utrecht-link--focus, .utrecht-link:focus {
+.utrecht-link--focus, .utrecht-link:focus, .utrecht-link-button:focus, .utrecht-link-button--focus {
   color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip: none;
@@ -1361,7 +1634,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link--focus-visible, .utrecht-link:focus {
+.utrecht-link--focus-visible, .utrecht-link:focus, .utrecht-link-button:focus, .utrecht-link-button--focus-visible {
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
   outline-offset: var(--utrecht-focus-outline-offset, 0);
@@ -1369,7 +1642,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
-.utrecht-link:focus:not(:focus-visible) {
+.utrecht-link:focus:not(:focus-visible), .utrecht-link-button:focus:not(:focus-visible) {
   /* undo focus ring */
   box-shadow: none;
   outline-style: none;

package/dist/index.css

@@ -354,7 +354,7 @@ ol.utrecht-breadcrumb__list {
 .utrecht-button, .utrecht-html input[type=button i],
 .utrecht-html input[type=reset i],
 .utrecht-html input[type=submit i],
-.utrecht-html button {
+.utrecht-html button, .utrecht-button-link {
   background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
   border-color: var(--utrecht-button-border-color, transparent);
   border-radius: var(--utrecht-button-border-radius);
@@ -401,7 +401,7 @@ ol.utrecht-breadcrumb__list {
 .utrecht-button:disabled, .utrecht-html input[type=button i]:disabled,
 .utrecht-html input[type=reset i]:disabled,
 .utrecht-html input[type=submit i]:disabled,
-.utrecht-html button:disabled,
+.utrecht-html button:disabled, .utrecht-button-link:disabled,
 .utrecht-button--disabled,
 .utrecht-html button[aria-disabled=true] {
   background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
@@ -412,7 +412,7 @@ ol.utrecht-breadcrumb__list {
 
 .utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=reset i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
-.utrecht-html input[type=submit i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input[type=submit i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-button--active,
 .utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
   background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
@@ -420,10 +420,10 @@ ol.utrecht-breadcrumb__list {
   color: var(--utrecht-button-active-color, var(--utrecht-button-color));
 }
 
-.utrecht-button--focus-visible, .utrecht-html button:focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button--focus-visible, .utrecht-html button:focus-visible, .utrecht-button-link--focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
-.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
   /* the pseudo-class for `:focus-visible` is implemented via the mixin */
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -432,10 +432,10 @@ ol.utrecht-breadcrumb__list {
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
-.utrecht-button--focus, .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled), .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button--focus, .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled), .utrecht-button-link--focus, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
-.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
   background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
   border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
   color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
@@ -446,17 +446,18 @@ ol.utrecht-breadcrumb__list {
 .utrecht-button:focus:not(:focus-visible), .utrecht-html input[type=button i]:focus:not(:focus-visible),
 .utrecht-html input[type=reset i]:focus:not(:focus-visible),
 .utrecht-html input[type=submit i]:focus:not(:focus-visible),
-.utrecht-html button:focus:not(:focus-visible) {
+.utrecht-html button:focus:not(:focus-visible), .utrecht-button-link:focus:not(:focus-visible) {
   /* undo focus ring */
   box-shadow: none;
   outline-style: none;
 }
 
-.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover:not([aria-disabled=true]),
+.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover:not([aria-disabled=true]), .utrecht-button-link--hover:not(:disabled),
 .utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
-.utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+.utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button-link:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
   background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
   border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
   color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
@@ -497,6 +498,140 @@ ol.utrecht-breadcrumb__list {
   gap: var(--utrecht-button-group-block-gap, 1em);
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-button, .utrecht-html input[type=button i],
+.utrecht-html input[type=reset i],
+.utrecht-html input[type=submit i],
+.utrecht-html button, .utrecht-button-link {
+  background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-border-color, transparent);
+  border-radius: var(--utrecht-button-border-radius);
+  border-style: solid;
+  border-width: var(--utrecht-button-border-width, 0);
+  color: var(--utrecht-button-primary-action-color, var(--utrecht-button-color));
+  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
+  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
+  font-weight: var(--utrecht-button-font-weight);
+  inline-size: var(--utrecht-button-inline-size, auto);
+  letter-spacing: var(--utrecht-button-letter-spacing);
+  min-block-size: var(--utrecht-button-min-block-size, auto);
+  min-inline-size: var(--utrecht-button-min-inline-size, 0);
+  padding-block-end: var(--utrecht-button-padding-block-end);
+  padding-block-start: var(--utrecht-button-padding-block-start);
+  padding-inline-end: var(--utrecht-button-padding-inline-end);
+  padding-inline-start: var(--utrecht-button-padding-inline-start);
+  text-transform: var(--utrecht-button-text-transform);
+  user-select: none;
+}
+
+.utrecht-button--distanced, .utrecht-html input[type=button i],
+.utrecht-html input[type=reset i],
+.utrecht-html input[type=submit i],
+.utrecht-html button {
+  margin-block-end: var(--utrecht-button-margin-block-end);
+  margin-block-start: var(--utrecht-button-margin-block-start);
+  margin-inline-end: var(--utrecht-button-margin-inline-end);
+  margin-inline-start: var(--utrecht-button-margin-inline-start);
+}
+
+.utrecht-button--submit, .utrecht-html button[type=submit i],
+.utrecht-html input[type=submit i] {
+  /* lower priority specificty than busy and disabled cursor */
+  cursor: var(--utrecht-action-submit-cursor);
+}
+
+.utrecht-button--busy, .utrecht-html button[aria-busy=true],
+.utrecht-html button[aria-disabled=true][aria-busy=true],
+.utrecht-html button:disabled[aria-busy=true] {
+  cursor: var(--utrecht-action-busy-cursor);
+}
+
+.utrecht-button:disabled, .utrecht-html input[type=button i]:disabled,
+.utrecht-html input[type=reset i]:disabled,
+.utrecht-html input[type=submit i]:disabled,
+.utrecht-html button:disabled, .utrecht-button-link:disabled,
+.utrecht-button--disabled,
+.utrecht-html button[aria-disabled=true] {
+  background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-disabled-color, var(--utrecht-button-color));
+  cursor: var(--utrecht-action-disabled-cursor);
+}
+
+.utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input[type=reset i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input[type=submit i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button--active,
+.utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
+  background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-active-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-active-color, var(--utrecht-button-color));
+}
+
+.utrecht-button--focus-visible, .utrecht-html button:focus-visible, .utrecht-button-link--focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-button--focus, .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled), .utrecht-button-link--focus, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
+}
+
+/* override the `:focus` selector above */
+/* stylelint-disable-next-line no-descending-specificity */
+.utrecht-button:focus:not(:focus-visible), .utrecht-html input[type=button i]:focus:not(:focus-visible),
+.utrecht-html input[type=reset i]:focus:not(:focus-visible),
+.utrecht-html input[type=submit i]:focus:not(:focus-visible),
+.utrecht-html button:focus:not(:focus-visible), .utrecht-button-link:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover:not([aria-disabled=true]), .utrecht-button-link--hover:not(:disabled),
+.utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button-link:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+  background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
+  border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
+  color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
+  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
+}
+
+.utrecht-button-link {
+  cursor: var(--utrecht-action-navigate-cursor, pointer);
+  text-decoration: none;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Robbert Broersma
@@ -1267,6 +1402,173 @@ ol.utrecht-breadcrumb__list {
   height: 1em;
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 The Knights Who Say NIH! B.V.
+ * Copyright (c) 2021 Gemeente Utrecht
+ */
+/* stylelint-disable scss/no-global-function-names */
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+/* stylelint-disable-next-line block-no-empty */
+/*
+
+# CSS implementation
+
+## `text-decoration-skip`
+
+`text-decoration-skip` can be helpful to avoid making some texts unreadable.
+For example by obscuring Arabic diacritics.
+
+However, the combination of a greater thickness and skipping this thick underline
+leads to a very unappealing rendering of the underline. To avoid this,
+`text-decoration-skip` is disabled for interactive states.
+
+For design token configurations that have identical thickness for normal and interactive
+states, this will lead to the (undesirable) effect that the focus/hover effect is switching
+from an interrupted to an uninterrupted underline (for some texts).
+
+Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.
+
+---
+
+Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
+that moving the pointer away from a link or having focus elsewhere first is simple enough to
+not make this too inconvenient.
+
+---
+
+Some folks implement the underline of links using `border-bottom` or even using a finely crafted
+`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
+would unfortunately not be able to provide the improved readability of `text-decoration-skip`.
+
+## `text-decoration-thickness`
+
+Varying `text-decoration-thickness` can be used to distinguish interactive states.
+
+---
+
+`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
+In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
+the underline offset also seems to increase along with the thickness, which effectively means
+the underline is closer to the next line than in Safari.
+
+---
+
+It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
+use the `max()` function to ensure the underline remains visible for every font size.
+
+## `transition`
+
+`text-decoration-thickness` could be a candidate for animating between interactive states,
+however browsers don't seem to have implemented great looking supixel tweening yet.
+
+`text-decoration-skip` also makes the transition more challenging to implement.
+
+*/
+.utrecht-link, .utrecht-html a:link, .utrecht-link-button {
+  color: var(--utrecht-link-color, blue);
+  text-decoration: var(--utrecht-link-text-decoration, underline);
+  text-decoration-skip-ink: all;
+  text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
+  text-underline-offset: var(--utrecht-link-text-underline-offset);
+}
+
+.utrecht-link--icon-left {
+  background-image: var(--utrecht-link-icon-left-background-image, none);
+  background-position: 0 0.25em;
+  background-repeat: no-repeat;
+  color: var(--utrecht-link-color, blue);
+  font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+  padding-inline-start: var(--utrecht-space-block-md);
+  text-decoration: none;
+}
+
+.utrecht-link:visited, .utrecht-link-button:visited,
+.utrecht-link--visited,
+.utrecht-html a:visited {
+  color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
+}
+
+.utrecht-link:hover, .utrecht-link-button:hover,
+.utrecht-link--hover,
+.utrecht-html a:hover,
+.utrecht-link-button--hover {
+  color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
+  text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
+}
+
+.utrecht-link:active, .utrecht-link-button:active,
+.utrecht-link--active,
+.utrecht-html a:active,
+.utrecht-link-button--active {
+  color: var(--utrecht-link-active-color, var(--utrecht-link-color));
+}
+
+.utrecht-link--focus, .utrecht-html a:focus, .utrecht-link-button--focus, .utrecht-link:focus, .utrecht-link-button:focus {
+  color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
+  text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
+  text-decoration-skip: none;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
+}
+
+.utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link-button--focus-visible, .utrecht-link:focus, .utrecht-link-button:focus {
+  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
+  outline-color: var(--utrecht-focus-outline-color, transparent);
+  outline-offset: var(--utrecht-focus-outline-offset, 0);
+  outline-style: var(--utrecht-focus-outline-style, solid);
+  outline-width: var(--utrecht-focus-outline-width, 0);
+}
+
+.utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link, .utrecht-link-button:focus:not(:focus-visible) {
+  /* undo focus ring */
+  box-shadow: none;
+  outline-style: none;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-link--telephone, .utrecht-html a[href^="tel:" i] {
+  white-space: nowrap;
+}
+
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
+.utrecht-link-button {
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
+  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
+  font-weight: var(--utrecht-button-font-weight);
+  inline-size: var(--utrecht-button-inline-size, auto);
+  letter-spacing: var(--utrecht-button-letter-spacing);
+  min-block-size: var(--utrecht-button-min-block-size, auto);
+  min-inline-size: var(--utrecht-button-min-inline-size, 0);
+  padding-block-end: var(--utrecht-button-padding-block-end);
+  padding-block-start: var(--utrecht-button-padding-block-start);
+  padding-inline-end: var(--utrecht-button-padding-inline-end);
+  padding-inline-start: var(--utrecht-button-padding-inline-start);
+  text-transform: var(--utrecht-button-text-transform);
+  user-select: none;
+}
+
+.utrecht-link-button--html-button {
+  background-color: transparent;
+  /* reset <button> styling */
+  border-width: 0;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 Gemeente Utrecht
@@ -1353,7 +1655,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 `text-decoration-skip` also makes the transition more challenging to implement.
 
 */
-.utrecht-link, .utrecht-html a:link {
+.utrecht-link, .utrecht-html a:link, .utrecht-link-button {
   color: var(--utrecht-link-color, blue);
   text-decoration: var(--utrecht-link-text-decoration, underline);
   text-decoration-skip-ink: all;
@@ -1371,15 +1673,16 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration: none;
 }
 
-.utrecht-link:visited,
+.utrecht-link:visited, .utrecht-link-button:visited,
 .utrecht-link--visited,
 .utrecht-html a:visited {
   color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
 }
 
-.utrecht-link:hover,
+.utrecht-link:hover, .utrecht-link-button:hover,
 .utrecht-link--hover,
-.utrecht-html a:hover {
+.utrecht-html a:hover,
+.utrecht-link-button--hover {
   color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip: none;
@@ -1387,13 +1690,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link:active,
+.utrecht-link:active, .utrecht-link-button:active,
 .utrecht-link--active,
-.utrecht-html a:active {
+.utrecht-html a:active,
+.utrecht-link-button--active {
   color: var(--utrecht-link-active-color, var(--utrecht-link-color));
 }
 
-.utrecht-link--focus, .utrecht-html a:focus, .utrecht-link:focus {
+.utrecht-link--focus, .utrecht-html a:focus, .utrecht-link:focus, .utrecht-link-button:focus, .utrecht-link-button--focus {
   color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip: none;
@@ -1401,7 +1705,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus {
+.utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus, .utrecht-link-button:focus, .utrecht-link-button--focus-visible {
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
   outline-offset: var(--utrecht-focus-outline-offset, 0);
@@ -1409,7 +1713,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
-.utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link {
+.utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link, .utrecht-link-button:focus:not(:focus-visible) {
   /* undo focus ring */
   box-shadow: none;
   outline-style: none;
@@ -2809,7 +3113,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-button, .utrecht-html input[type=button i],
 .utrecht-html input[type=reset i],
 .utrecht-html input[type=submit i],
-.utrecht-html button {
+.utrecht-html button, .utrecht-button-link {
   background-color: var(--utrecht-button-primary-action-background-color, var(--utrecht-button-background-color));
   border-color: var(--utrecht-button-border-color, transparent);
   border-radius: var(--utrecht-button-border-radius);
@@ -2856,7 +3160,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-button:disabled, .utrecht-html input[type=button i]:disabled,
 .utrecht-html input[type=reset i]:disabled,
 .utrecht-html input[type=submit i]:disabled,
-.utrecht-html button:disabled,
+.utrecht-html button:disabled, .utrecht-button-link:disabled,
 .utrecht-button--disabled,
 .utrecht-html button[aria-disabled=true] {
   background-color: var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color));
@@ -2867,7 +3171,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 .utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=reset i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
-.utrecht-html input[type=submit i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-html input[type=submit i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-button--active,
 .utrecht-html button:active:not([aria-disabled=true]):not(:disabled) {
   background-color: var(--utrecht-button-active-background-color, var(--utrecht-button-background-color));
@@ -2878,7 +3182,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-button--focus-visible, .utrecht-html button:focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
-.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link--focus-visible {
   /* the pseudo-class for `:focus-visible` is implemented via the mixin */
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -2890,7 +3194,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-button--focus, .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled), .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
-.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+.utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link--focus {
   background-color: var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color));
   border-color: var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color));
   color: var(--utrecht-button-focus-color, var(--utrecht-button-color));
@@ -2901,17 +3205,18 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-button:focus:not(:focus-visible), .utrecht-html input[type=button i]:focus:not(:focus-visible),
 .utrecht-html input[type=reset i]:focus:not(:focus-visible),
 .utrecht-html input[type=submit i]:focus:not(:focus-visible),
-.utrecht-html button:focus:not(:focus-visible) {
+.utrecht-html button:focus:not(:focus-visible), .utrecht-button-link:focus:not(:focus-visible) {
   /* undo focus ring */
   box-shadow: none;
   outline-style: none;
 }
 
-.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover:not([aria-disabled=true]),
+.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover:not([aria-disabled=true]), .utrecht-button-link--hover:not(:disabled),
 .utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
-.utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
+.utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button-link:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
   background-color: var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color));
   border-color: var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color));
   color: var(--utrecht-button-hover-color, var(--utrecht-button-color));
@@ -3313,7 +3618,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
  * Copyright (c) 2021 Robbert Broersma
  */
 /* stylelint-disable-next-line block-no-empty */
-.utrecht-button, .utrecht-html input[type=button i],
+.utrecht-button, .utrecht-button-link, .utrecht-html input[type=button i],
 .utrecht-html input[type=reset i],
 .utrecht-html input[type=submit i],
 .utrecht-html button {
@@ -3360,7 +3665,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   cursor: var(--utrecht-action-busy-cursor);
 }
 
-.utrecht-button:disabled, .utrecht-html input[type=button i]:disabled,
+.utrecht-button:disabled, .utrecht-button-link:disabled, .utrecht-html input[type=button i]:disabled,
 .utrecht-html input[type=reset i]:disabled,
 .utrecht-html input[type=submit i]:disabled,
 .utrecht-html button:disabled,
@@ -3372,7 +3677,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   cursor: var(--utrecht-action-disabled-cursor);
 }
 
-.utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=reset i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=submit i]:active:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-button--active,
@@ -3382,7 +3687,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-button-active-color, var(--utrecht-button-color));
 }
 
-.utrecht-button--focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button--focus-visible, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link--focus-visible, .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html button:focus-visible {
@@ -3394,7 +3699,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
-.utrecht-button--focus, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button--focus, .utrecht-button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-button-link--focus, .utrecht-html input[type=button i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=reset i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=submit i]:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html button:focus:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled), .utrecht-html button:focus:not([aria-disabled=true]):not(:disabled) {
@@ -3405,7 +3710,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 
 /* override the `:focus` selector above */
 /* stylelint-disable-next-line no-descending-specificity */
-.utrecht-button:focus:not(:focus-visible), .utrecht-html input[type=button i]:focus:not(:focus-visible),
+.utrecht-button:focus:not(:focus-visible), .utrecht-button-link:focus:not(:focus-visible), .utrecht-html input[type=button i]:focus:not(:focus-visible),
 .utrecht-html input[type=reset i]:focus:not(:focus-visible),
 .utrecht-html input[type=submit i]:focus:not(:focus-visible),
 .utrecht-html button:focus:not(:focus-visible) {
@@ -3414,8 +3719,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-style: none;
 }
 
-.utrecht-button--hover:not(:disabled), .utrecht-html button:not(:disabled):hover:not([aria-disabled=true]),
+.utrecht-button--hover:not(:disabled), .utrecht-button-link--hover:not(:disabled), .utrecht-html button:not(:disabled):hover:not([aria-disabled=true]),
 .utrecht-button:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
+.utrecht-button-link:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=button i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=reset i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled),
 .utrecht-html input[type=submit i]:hover:not(:disabled):not([aria-disabled=true]):not(.utrecht-button--disabled) {
@@ -3801,7 +4107,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 `text-decoration-skip` also makes the transition more challenging to implement.
 
 */
-.utrecht-link, .utrecht-html a:link {
+.utrecht-link, .utrecht-html a:link, .utrecht-link-button {
   color: var(--utrecht-link-color, blue);
   text-decoration: var(--utrecht-link-text-decoration, underline);
   text-decoration-skip-ink: all;
@@ -3819,15 +4125,16 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration: none;
 }
 
-.utrecht-link:visited,
+.utrecht-link:visited, .utrecht-link-button:visited,
 .utrecht-link--visited,
 .utrecht-html a:visited {
   color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
 }
 
-.utrecht-link:hover,
+.utrecht-link:hover, .utrecht-link-button:hover,
 .utrecht-link--hover,
-.utrecht-html a:hover {
+.utrecht-html a:hover,
+.utrecht-link-button--hover {
   color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip: none;
@@ -3835,13 +4142,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link:active,
+.utrecht-link:active, .utrecht-link-button:active,
 .utrecht-link--active,
-.utrecht-html a:active {
+.utrecht-html a:active,
+.utrecht-link-button--active {
   color: var(--utrecht-link-active-color, var(--utrecht-link-color));
 }
 
-.utrecht-link--focus, .utrecht-html a:focus, .utrecht-link:focus {
+.utrecht-link--focus, .utrecht-html a:focus, .utrecht-link:focus, .utrecht-link-button:focus, .utrecht-link-button--focus {
   color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip: none;
@@ -3849,7 +4157,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus {
+.utrecht-link--focus-visible, .utrecht-html a:focus, .utrecht-link:focus, .utrecht-link-button:focus, .utrecht-link-button--focus-visible {
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
   outline-offset: var(--utrecht-focus-outline-offset, 0);
@@ -3857,7 +4165,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
-.utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link {
+.utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link, .utrecht-link-button:focus:not(:focus-visible) {
   /* undo focus ring */
   box-shadow: none;
   outline-style: none;
@@ -4511,7 +4819,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 `text-decoration-skip` also makes the transition more challenging to implement.
 
 */
-.utrecht-link, .utrecht-html a:link {
+.utrecht-link, .utrecht-link-button, .utrecht-html a:link {
   color: var(--utrecht-link-color, blue);
   text-decoration: var(--utrecht-link-text-decoration, underline);
   text-decoration-skip-ink: all;
@@ -4529,14 +4837,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration: none;
 }
 
-.utrecht-link:visited,
+.utrecht-link:visited, .utrecht-link-button:visited,
 .utrecht-link--visited,
 .utrecht-html a:visited {
   color: var(--utrecht-link-visited-color, var(--utrecht-link-color));
 }
 
-.utrecht-link:hover,
+.utrecht-link:hover, .utrecht-link-button:hover,
 .utrecht-link--hover,
+.utrecht-link-button--hover,
 .utrecht-html a:hover {
   color: var(--utrecht-link-hover-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));
@@ -4545,13 +4854,14 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link:active,
+.utrecht-link:active, .utrecht-link-button:active,
 .utrecht-link--active,
+.utrecht-link-button--active,
 .utrecht-html a:active {
   color: var(--utrecht-link-active-color, var(--utrecht-link-color));
 }
 
-.utrecht-link--focus, .utrecht-link:focus, .utrecht-html a:focus {
+.utrecht-link--focus, .utrecht-link:focus, .utrecht-link-button:focus, .utrecht-link-button--focus, .utrecht-html a:focus {
   color: var(--utrecht-link-focus-color, var(--utrecht-link-color));
   text-decoration: var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));
   text-decoration-skip: none;
@@ -4559,7 +4869,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   text-decoration-thickness: max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
 }
 
-.utrecht-link--focus-visible, .utrecht-link:focus, .utrecht-html a:focus {
+.utrecht-link--focus-visible, .utrecht-link:focus, .utrecht-link-button:focus, .utrecht-link-button--focus-visible, .utrecht-html a:focus {
   box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
   outline-color: var(--utrecht-focus-outline-color, transparent);
   outline-offset: var(--utrecht-focus-outline-offset, 0);
@@ -4567,7 +4877,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   outline-width: var(--utrecht-focus-outline-width, 0);
 }
 
-.utrecht-link:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link {
+.utrecht-link:focus:not(:focus-visible), .utrecht-link-button:focus:not(:focus-visible), .utrecht-html a:focus:not(:focus-visible):link {
   /* undo focus ring */
   box-shadow: none;
   outline-style: none;
@@ -5234,7 +5544,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 /* Collection of CSS variables for Utrecht theme applied to `:root` */
 /**
  * Do not edit directly
- * Generated on Sat, 14 May 2022 12:04:02 GMT
+ * Generated on Sat, 14 May 2022 13:56:55 GMT
  */
 .utrecht-theme {
   --denhaag-process-steps-sub-step-heading-font-weight: utrecht.typography.weight-scale.normal.font-weight;
@@ -5580,6 +5890,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-space-block-3xs: 2px;
   /* Extra Small 3 */
   --utrecht-action-submit-cursor: pointer;
+  --utrecht-action-navigate-cursor: pointer;
   --utrecht-action-disabled-cursor: not-allowed;
   --utrecht-action-busy-cursor: wait;
   --utrecht-button-focus-transform-scale: 1.02;

package/dist/root-theme.css

@@ -5,7 +5,7 @@
 /* Collection of CSS variables for Utrecht theme applied to `:root` */
 /**
  * Do not edit directly
- * Generated on Sat, 14 May 2022 12:04:02 GMT
+ * Generated on Sat, 14 May 2022 13:56:55 GMT
  */
 .utrecht-theme {
   --denhaag-process-steps-sub-step-heading-font-weight: utrecht.typography.weight-scale.normal.font-weight;
@@ -351,6 +351,7 @@
   --utrecht-space-block-3xs: 2px;
   /* Extra Small 3 */
   --utrecht-action-submit-cursor: pointer;
+  --utrecht-action-navigate-cursor: pointer;
   --utrecht-action-disabled-cursor: not-allowed;
   --utrecht-action-busy-cursor: wait;
   --utrecht-button-focus-transform-scale: 1.02;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-alpha.208",
+  "version": "1.0.0-alpha.209",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -16,7 +16,7 @@
     "url": "git@github.com:nl-design-system/utrecht.git"
   },
   "devDependencies": {
-    "@utrecht/design-tokens": "1.0.0-alpha.201",
+    "@utrecht/design-tokens": "1.0.0-alpha.202",
     "node-sass-package-importer": "5.3.2",
     "rimraf": "3.0.2",
     "sass": "1.50.1"
@@ -26,5 +26,5 @@
     "build": "sass src/:dist/ --load-path=../../node_modules/ --no-source-map",
     "clean": "rimraf dist/"
   },
-  "gitHead": "6cdfa3731ad2ef4e2e43add8c193d9f311e045c8"
+  "gitHead": "2cf2c1bc155fc767995dedf10f623a4dc5eb6c81"
 }

package/src/bem.scss

@@ -25,6 +25,7 @@
 @import "../../../components/breadcrumb/css";
 @import "../../../components/button/bem";
 @import "../../../components/button-group/css";
+@import "../../../components/button-link/css";
 @import "../../../components/checkbox/css";
 @import "../../../components/custom-checkbox/css";
 @import "../../../components/digid-button/css";
@@ -47,6 +48,7 @@
 @import "../../../components/heading-5/bem";
 @import "../../../components/heading-6/bem";
 @import "../../../components/link-list/css";
+@import "../../../components/link-button/css";
 @import "../../../components/link-social/css";
 @import "../../../components/link/css";
 @import "../../../components/logo-button/css";