diff --git a/_config.yml b/_config.yml
index 14259dbd9..2bfd45825 100644
--- a/_config.yml
+++ b/_config.yml
@@ -30,7 +30,6 @@ plugins:
tabler-plugins:
- tabler-flags
- tabler-payments
- - tabler-buttons
exclude:
- .jekyll-cache
diff --git a/src/js/autosize.js b/src/js/autosize.js
new file mode 100644
index 000000000..6bb5ed207
--- /dev/null
+++ b/src/js/autosize.js
@@ -0,0 +1,10 @@
+// Autosize plugin
+
+import autosize from 'autosize';
+
+const elements = document.querySelectorAll('[data-toggle="autosize"]');
+if (elements.length) {
+ elements.forEach(function (element) {
+ autosize(element);
+ });
+}
\ No newline at end of file
diff --git a/src/js/tabler.js b/src/js/tabler.js
index c1458e366..aff52ba3f 100644
--- a/src/js/tabler.js
+++ b/src/js/tabler.js
@@ -1,5 +1,6 @@
//Vendor
-// import 'bootstrap';
+
+import './autosize';
(function() {
/**
diff --git a/src/pages/_data/charts.yml b/src/pages/_data/charts.yml
index 5c80eac97..088aad604 100644
--- a/src/pages/_data/charts.yml
+++ b/src/pages/_data/charts.yml
@@ -168,7 +168,6 @@ development-activity:
legend-position: 'top'
sparkline: true
datetime: true
- title: Development Activity
series:
- name: 'Purchases'
color: blue
diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml
index d591a47b7..6eeff4d57 100644
--- a/src/pages/_data/menu.yml
+++ b/src/pages/_data/menu.yml
@@ -169,6 +169,9 @@ layout:
dark-mode:
url: layout-dark.html
title: Dark mode
+ rtl-mode:
+ url: layout-rtl.html
+ title: RTL mode
fluid:
url: layout-fluid.html
title: Fluid
diff --git a/src/pages/_docs/autosize.md b/src/pages/_docs/autosize.md
index 58ab4a487..bca00fb21 100644
--- a/src/pages/_docs/autosize.md
+++ b/src/pages/_docs/autosize.md
@@ -2,7 +2,6 @@
title: Autosize
menu: docs.autosize
description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
-done: true
libs: autosize
---
diff --git a/src/pages/_docs/avatars.md b/src/pages/_docs/avatars.md
index c0a7f9e9c..56f6e1900 100644
--- a/src/pages/_docs/avatars.md
+++ b/src/pages/_docs/avatars.md
@@ -79,6 +79,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar o
{% include ui/avatar.html person-id=8 size="md" %}
{% include ui/avatar.html person-id=7 %}
{% include ui/avatar.html person-id=6 size="sm" %}
+{% include ui/avatar.html person-id=5 size="xs" %}
{% endcapture %}
{% include example.html code=code centered=true %}
diff --git a/src/pages/_docs/badges.md b/src/pages/_docs/badges.md
index 748b3cc29..6fd879a9d 100644
--- a/src/pages/_docs/badges.md
+++ b/src/pages/_docs/badges.md
@@ -66,27 +66,29 @@ Leave the HTML element empty if you want to create badges without any text. Empt
{% include example.html code=code centered=true %}
-### Badge add-ons
-
-Add the `.badge-addon` class to create an add-on that will customize your badge and make it more noticeable. You can use any color variants and combine them as you see fit.
-
-{% capture code %}
-{% include ui/badge.html text="task" color="green" addon="finished" %}
-{% include ui/badge.html text="bundle" color="purple" addon="passing" %}
-{% include ui/badge.html text="CSS gzip size" color="red-lt" addon="20.9kB" addon-color="red" %}
-{% endcapture %}
-{% include example.html code=code %}
-
-
-### Badge avatars
+## Badge avatars
Create the `.badge-avatar` class to add an avatar that will make a badge more personalized.
{% capture code %}
-{% include ui/badge.html person-id=1 color="blue" %}
-{% include ui/badge.html person-id=2 color="blue" %}
-{% include ui/badge.html person-id=3 color="blue" %}
-{% include ui/badge.html person-id=4 color="blue" %}
-{% include ui/badge.html person-id=5 color="blue" %}
+{% include ui/badge.html person-id=1 %}
+{% include ui/badge.html person-id=2 %}
+{% include ui/badge.html person-id=3 %}
+{% include ui/badge.html person-id=4 %}
+{% include ui/badge.html person-id=5 %}
{% endcapture %}
{% include example.html code=code %}
+
+## Button with badge
+
+Badges can be used as part of links or buttons to provide a counter.
+
+{% capture code %}
+
+
+{% endcapture %}
+{% include example.html code=code wrapper="btn-list" %}
\ No newline at end of file
diff --git a/src/pages/_docs/buttons.md b/src/pages/_docs/buttons.md
index b140ec778..9a2595dd0 100644
--- a/src/pages/_docs/buttons.md
+++ b/src/pages/_docs/buttons.md
@@ -2,8 +2,7 @@
title: Buttons
description: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
bootstrap-link: components/buttons/
-done: true
-libs: tabler-buttons
+menu: docs.buttons
---
@@ -12,15 +11,24 @@ libs: tabler-buttons
As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or app and guiding them in their actions. Use the `.btn` classes with the `