Function Link

Function links trigger an action instead of navigating to a new page. They use a secondary color and must always be accompanied by an icon to visually distinguish them from navigation links.

---

Class

Class	Size	Color	Hover
.function-link	0.875rem (14px)	--color-text-secondary	--color-text + underline

Preview

<div class="flex flex-col gap-2">
  <button type="button" class="function-link"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/></svg> Add another person</button>
  <button type="button" class="function-link"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M5 1a2 2 0 0 0-2 2v1h10V3a2 2 0 0 0-2-2zm6 4H5v7a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2z"/></svg> Print receipt</button>
</div>

---

Usage

Function links must always have an icon before the text. Use <button> since they trigger an action — not navigation:

<button type="button" class="function-link">
  <svg><!-- icon --></svg>
  Add another person
</button>

If the function link navigates (e.g. with JavaScript), <a> can be used:

<a href="#" class="function-link" role="button">
  <svg><!-- icon --></svg>
  Print receipt
</a>

---

Guidelines

• Function links must always be accompanied by an icon.
• The icon is placed before the text and helps the user quickly recognize the action's purpose.

Use for

• Actions in forms (add, remove, print).
• Links to functionality rather than pages.

Do not use for

• Standard navigation between pages — use a normal link.
• Primary actions — use a <button> instead.