diff --git a/_config.yml b/_config.yml
index a714aa795..c5cdbc979 100644
--- a/_config.yml
+++ b/_config.yml
@@ -106,4 +106,4 @@ docs-menu:
 - title: Getting started
   pages: [index]
 - title: Components
-  pages: [avatars, badges, buttons]
+  pages: [avatars, badges, buttons, tooltips]
diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md
index 82f14b71d..65b462618 100644
--- a/pages/_docs/avatars.md
+++ b/pages/_docs/avatars.md
@@ -1,8 +1,9 @@
 ---
 title: Avatars
-description: Create and group avatars of various shapes and sizes with one component.
 ---
 
+Create and group avatars of various shapes and sizes with one component.
+
 ### Default markup
 
 {% example html wrapper=avatar-list %}
diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md
index a4265ddb7..71e0287f9 100644
--- a/pages/_docs/badges.md
+++ b/pages/_docs/badges.md
@@ -2,6 +2,8 @@
 title: Badges
 ---
 
+A small count and labeling component. Please read the [official Bootstrap documentation](https://getbootstrap.com/docs/4.3/components/badge/) for a full list of options.
+
 ### Default markup
 
 {% example html %}
diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md
new file mode 100644
index 000000000..953155f27
--- /dev/null
+++ b/pages/_docs/buttons.md
@@ -0,0 +1,13 @@
+---
+title: Buttons
+---
+
+### Default markup
+
+{% example html wrapper=btn-list %}
+{% include ui/button.html color="primary" text="Button" %}
+{% include ui/button.html color="secondary" text="Button" %}
+{% include ui/button.html color="danger" text="Button" %}
+{% include ui/button.html color="warning" text="Button" %}
+{% include ui/button.html color="success" text="Button" %}
+{% endexample %}
diff --git a/pages/_docs/tooltips.md b/pages/_docs/tooltips.md
new file mode 100644
index 000000000..3727c6194
--- /dev/null
+++ b/pages/_docs/tooltips.md
@@ -0,0 +1,18 @@
+---
+title: Tooltips
+---
+
+{% example html wrapper=btn-list %}
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
+  Tooltip on top
+</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
+  Tooltip on right
+</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
+  Tooltip on bottom
+</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
+  Tooltip on left
+</button>
+{% endexample %}
diff --git a/pages/_includes/ui/button.html b/pages/_includes/ui/button.html
index 7b2178811..bf6185599 100644
--- a/pages/_includes/ui/button.html
+++ b/pages/_includes/ui/button.html
@@ -1 +1 @@
-{% assign element = include.element | default: 'button' %}<{{ element }} href="{{ include.href | default: '#' }}" class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}">{% if include.icon %}{% include ui/icon.html icon=include.icon %}{% endif %}{% if include.label %}<span class="btn-label-icon">{% include ui/icon.html icon=include.label %}</span>{% endif %}{{ include.text }}</{{ element }}>
+{% assign element = include.element | default: 'button' %}<{{ element }}{% if element == 'a' %} href="{{ include.href | default: '#' }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if include.color %} btn-{% if include.outline %}outline-{% endif %}{{ include.color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} btn-block{% endif %}{% if include.link %} btn-link{% endif %}{% if include.label %} btn-label{% endif %}">{% if include.icon %}{% include ui/icon.html icon=include.icon %}{% endif %}{% if include.label %}<span class="btn-label-icon">{% include ui/icon.html icon=include.label %}</span>{% endif %}{{ include.text }}</{{ element }}>
diff --git a/pages/_layouts/docs.html b/pages/_layouts/docs.html
index 8569055fd..a097cbb4b 100644
--- a/pages/_layouts/docs.html
+++ b/pages/_layouts/docs.html
@@ -17,7 +17,7 @@ page-title: Documentation
 		<div class="list-group list-group-transparent mb-0">
 			{% for p in group.pages %}
 			{% assign doc = site.docs | where: "slug", p | first %}
-			<a href="{{ site.base }}/{{ doc.url }}" class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
+			<a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
 				{{ doc.title }}
 			</a>
 			{% endfor %}