diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index 6c96b97556..d81d4b7d39 100644
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@@ -22,6 +22,8 @@ This document shows you what's new in the latest release and flags it with one o
 
 - {{% badge color="fuchsia" icon="fab fa-hackerrank" title=" " %}}0.112.4{{% /badge %}} This release requires a newer Hugo version.
 
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} The topbar button received a way to add text next to the icon. For this, the original `title` option was renamed to `hint` while the new `title` option is now displayed next to the icon.
+
 - {{% badge style="note" title=" " %}}Change{{% /badge %}} The light themes have a bit more contrast for content text and headings. Also the syntaxhighlighting was changed to the more colorful MonokaiLight. This brings the syntaxhighlightning in sync with the corresponding dark theme variants, which are using Monokai. If you dislike this, you can create your own color variant file as [described here](basics/branding#modify-shipped-variants).
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} You now can configure additional options for every theme variant in your `hugo.toml`. This allows for optional [advanced functionality](basics/branding#theme-variant-advanced). You don't need to change anything as the old configuration options will still work (but may generate warnings now).
diff --git a/exampleSite/content/basics/topbar/_index.en.md b/exampleSite/content/basics/topbar/_index.en.md
index b1bd54e40a..6f9728130c 100644
--- a/exampleSite/content/basics/topbar/_index.en.md
+++ b/exampleSite/content/basics/topbar/_index.en.md
@@ -111,12 +111,13 @@ For displaying an area in the button's overlay, see [Area-Button](#area-button).
 | **page**              | _<empty>_ | Mandatory reference to the page. |
 | **class**             | _<empty>_ | Mandatory unique class name for this button. Displaying two buttons with the same value for **class** is undefined. |
 | **href**              | _&lt;empty&gt;_ | Either the destination URL for the button or JavaScript code to be executed on click.<br><br>- if starting with `javascript:` all following text will be executed in your browser<br>- every other string will be interpreted as URL<br>- if empty the button will be displayed in disabled state regardless of its **content** |
-| **icon**              | _&lt;empty&gt;_ | Mandatory [Font Awesome icon name](shortcodes/icon#finding-an-icon). |
+| **icon**              | _&lt;empty&gt;_ | [Font Awesome icon name](shortcodes/icon#finding-an-icon). |
 | **onempty**           | `disable`       | Defines what to do with the button if **href** is not empty but the content overlay is empty:<br><br>- `disable`: The button is displayed in disabled state.<br>- `hide`: The button is removed. |
 | **onwidths**          | `show`          | The action, that should be executed if the site is displayed in the given width:<br><br>- `show`: The button is displayed in its given area<br>- `hide`: The button is removed.<br>- `area-XXX`: The button is moved from its given area into the area `XXX`. |
 | **onwidthm**          | `show`          | See above. |
 | **onwidthl**          | `show`          | See above. |
-| **title**             | _&lt;empty&gt;_ | Arbitrary text for title, displayed in the tooltip. |
+| **hint**              | _&lt;empty&gt;_ | Arbitrary text displayed in the tooltip. |
+| **title**             | _&lt;empty&gt;_ | Arbitrary text for the button. |
 | **content**           | _&lt;empty&gt;_ | Arbitrary HTML to put into the content overlay. This parameter may be empty. In this case no overlay will be generated. |
 
 ### Area-Button
@@ -131,12 +132,13 @@ Call this from your own button templates if you want to implement a button with
 |-----------------------|-----------------|-------------|
 | **page**              | _&lt;empty&gt;_ | Mandatory reference to the page. |
 | **area**              | _&lt;empty&gt;_ | Mandatory unique area name for this area. Displaying two areas with the same value for **area** is undefined. |
-| **icon**              | _&lt;empty&gt;_ | Mandatory [Font Awesome icon name](shortcodes/icon#finding-an-icon). |
+| **icon**              | _&lt;empty&gt;_ | [Font Awesome icon name](shortcodes/icon#finding-an-icon). |
 | **onempty**           | `disable`       | Defines what to do with the button if the content overlay is empty:<br><br>- `disable`: The button is displayed in disabled state.<br>- `hide`: The button is removed. |
 | **onwidths**          | `show`          | The action, that should be executed if the site is displayed in the given width:<br><br>- `show`: The button is displayed in its given area<br>- `hide`: The button is removed.<br>- `area-XXX`: The button is moved from its given area into the area `XXX`. |
 | **onwidthm**          | `show`          | See above. |
 | **onwidthl**          | `show`          | See above. |
-| **title**             | _&lt;empty&gt;_ | Arbitrary text for title, displayed in the tooltip. |
+| **hint**              | _&lt;empty&gt;_ | Arbitrary text displayed in the tooltip. |
+| **title**             | _&lt;empty&gt;_ | Arbitrary text for the button. |
 
 ### Predefined Buttons
 
diff --git a/layouts/partials/topbar/button/edit.html b/layouts/partials/topbar/button/edit.html
index 2b61189df0..8d70d8ad5a 100644
--- a/layouts/partials/topbar/button/edit.html
+++ b/layouts/partials/topbar/button/edit.html
@@ -14,7 +14,7 @@
 			"onwidths" $onwidths
 			"onwidthm" $onwidthm
 			"onwidthl" $onwidthl
-			"title" (printf "%s (CTRL+ALT+w)" (T "Edit-this-page"))
+			"hint" (printf "%s (CTRL+ALT+w)" (T "Edit-this-page"))
 		)}}
 	{{- end }}
 {{- end }}
\ No newline at end of file
diff --git a/layouts/partials/topbar/button/more.html b/layouts/partials/topbar/button/more.html
index 31b9c4ef37..0c9d22af6c 100644
--- a/layouts/partials/topbar/button/more.html
+++ b/layouts/partials/topbar/button/more.html
@@ -10,5 +10,5 @@
 	"onwidths" $onwidths
 	"onwidthm" $onwidthm
 	"onwidthl" $onwidthl
-	"title" (printf "%s" (T "More-action"))
+	"hint" (printf "%s" (T "More-action"))
 )}}
\ No newline at end of file
diff --git a/layouts/partials/topbar/button/next.html b/layouts/partials/topbar/button/next.html
index 9e6efe722e..1bf09e9325 100644
--- a/layouts/partials/topbar/button/next.html
+++ b/layouts/partials/topbar/button/next.html
@@ -32,7 +32,7 @@
 			"onwidths" $onwidths
 			"onwidthm" $onwidthm
 			"onwidthl" $onwidthl
-			"title" (printf "%s (%s)" ($next | default .).Title ($endarrow | safeHTML))
+			"hint" (printf "%s (%s)" ($next | default .).Title ($endarrow | safeHTML))
 		)}}
 	{{- end }}
 {{- end }}
\ No newline at end of file
diff --git a/layouts/partials/topbar/button/prev.html b/layouts/partials/topbar/button/prev.html
index 63b0c18b90..12a4e55729 100644
--- a/layouts/partials/topbar/button/prev.html
+++ b/layouts/partials/topbar/button/prev.html
@@ -35,7 +35,7 @@
 			"onwidths" $onwidths
 			"onwidthm" $onwidthm
 			"onwidthl" $onwidthl
-			"title" (printf "%s (%s)" ($prev | default .).Title ($startarrow | safeHTML))
+			"hint" (printf "%s (%s)" ($prev | default .).Title ($startarrow | safeHTML))
 		)}}
 	{{- end }}
 {{- end }}
\ No newline at end of file
diff --git a/layouts/partials/topbar/button/print.html b/layouts/partials/topbar/button/print.html
index 1205c13f07..ced9dbc5e1 100644
--- a/layouts/partials/topbar/button/print.html
+++ b/layouts/partials/topbar/button/print.html
@@ -14,7 +14,7 @@
 			"onwidths" $onwidths
 			"onwidthm" $onwidthm
 			"onwidthl" $onwidthl
-			"title" (printf "%s (CTRL+ALT+p)" (T "Print-this-chapter"))
+			"hint" (printf "%s (CTRL+ALT+p)" (T "Print-this-chapter"))
 		)}}
 	{{- end }}
 {{- end }}
\ No newline at end of file
diff --git a/layouts/partials/topbar/button/sidebar.html b/layouts/partials/topbar/button/sidebar.html
index e421a2452a..c328840b3a 100644
--- a/layouts/partials/topbar/button/sidebar.html
+++ b/layouts/partials/topbar/button/sidebar.html
@@ -10,6 +10,6 @@
 		"onwidths" $onwidths
 		"onwidthm" $onwidthm
 		"onwidthl" $onwidthl
-		"title" (printf "%s (CTRL+ALT+n)" (T "Navigation-toggle"))
+		"hint" (printf "%s (CTRL+ALT+n)" (T "Navigation-toggle"))
 	)}}
 {{- end }}
\ No newline at end of file
diff --git a/layouts/partials/topbar/button/toc.html b/layouts/partials/topbar/button/toc.html
index 81836c7b01..09b25d88d9 100644
--- a/layouts/partials/topbar/button/toc.html
+++ b/layouts/partials/topbar/button/toc.html
@@ -22,8 +22,9 @@
 			"onwidths" $onwidths
 			"onwidthm" $onwidthm
 			"onwidthl" $onwidthl
-			"title" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle"))
+			"hint" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle"))
 			"content" $content
+			"title" "Klaus"
 		)}}
 	{{- end }}
 {{- end }}
\ No newline at end of file
diff --git a/layouts/partials/topbar/func/area-button.html b/layouts/partials/topbar/func/area-button.html
index 6f91ed7ebc..35015e3d3f 100644
--- a/layouts/partials/topbar/func/area-button.html
+++ b/layouts/partials/topbar/func/area-button.html
@@ -1,5 +1,6 @@
 {{- $area := .area }}
 {{- $icon := .icon }}
+{{- $hint := .hint }}
 {{- $title := .title }}
 {{- $onempty := cond (isset . "onempty") .onempty "disable" }}
 {{- $onwidths := cond (isset . "onwidths") .onwidths "show" }}
@@ -20,6 +21,7 @@
 			"onwidthm" $onwidthm
 			"onwidthl" $onwidthl
 			"title" $title
+			"hint" $hint
 			"content" $content
 		)}}
 	{{- end }}
diff --git a/layouts/partials/topbar/func/button.html b/layouts/partials/topbar/func/button.html
index fbdbea0ca2..65a48a52a2 100644
--- a/layouts/partials/topbar/func/button.html
+++ b/layouts/partials/topbar/func/button.html
@@ -22,25 +22,28 @@
   {{- end }}
 {{- end }}
 {{- $title := (trim .title " ") | default "" }}
+{{- $hint := (trim .hint " ") | default "" }}
 {{- $icon := (trim .icon " ") | default "" }}
 {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}
 {{- $content := .content }}
             <div class="topbar-button {{ $class }}" data-content-empty="{{ $onempty }}" data-width-s="{{ $onwidths }}" data-width-m="{{ $onwidthm }}" data-width-l="{{ $onwidthl }}">
-{{- if $isDisabled }}
+{{- if $isDisabled -}}
               <span class="topbar-control">
-{{- else if $isButton }}
-              <button class="topbar-control"{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $title }}">
-{{- else }}
-              <a class="topbar-control"{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $title }}">
+{{- else if $isButton -}}
+              <button class="topbar-control"{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $hint }}">
+{{- else -}}
+              <a class="topbar-control"{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $hint }}">
 {{- end }}
-                <i class="{{ $icon }}"></i>
-{{- if $isDisabled }}
+{{- if and $icon }}<i class="{{ $icon }}"></i>{{ end }}
+{{- if and $icon $title }} {{ end }}
+{{- $title | safeHTML }}
+{{- if $isDisabled -}}
               </span>
-{{- else if $isButton }}
+{{- else if $isButton -}}
               </button>
-{{- else }}
+{{- else -}}
               </a>
 {{- end }}
 {{- if $content }}