Merge branch 'dev' of https://github.com/tabler/tabler into dev

.changeset/silly-lobsters-move.md

@@ -0,0 +1,5 @@
+---
+
+---
+
+Improve documentation for buttons

docs/ui/components/buttons.mdx

@@ -91,17 +91,6 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically a
 </div>
 ```
 
-```html
-<a href="#" class="btn btn-ghost-primary">Primary</a>
-<a href="#" class="btn btn-ghost-secondary">Secondary</a>
-<a href="#" class="btn btn-ghost-success">Success</a>
-<a href="#" class="btn btn-ghost-warning">Warning</a>
-<a href="#" class="btn btn-ghost-danger">Danger</a>
-<a href="#" class="btn btn-ghost-info">Info</a>
-<a href="#" class="btn btn-ghost-dark">Dark</a>
-<a href="#" class="btn btn-ghost-light">Light</a>
-```
-
 ## Square buttons
 
 Use the `.btn-square` class to remove the border radius, if you want the corners of your button to be square rather than rounded.
@@ -110,12 +99,6 @@ Use the `.btn-square` class to remove the border radius, if you want the corners
 <a href="#" class="btn btn-square">Square button</a>
 ```
 
-```html
-<a href="#" class="btn btn-square">
-  Square button
-</a>
-```
-
 ## Pill buttons
 
 Add the `.btn-pill` class to your button to make it rounded and give it a modern and attractive look.
@@ -124,12 +107,6 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern
 <a href="#" class="btn btn-pill">Pill button</a>
 ```
 
-```html
-<a href="#" class="btn btn-pill">
-  Pill button
-</a>
-```
-
 ## Outline buttons
 
 Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
@@ -145,33 +122,6 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want
 <a href="#" class="btn btn-outline-light">Light</a>
 ```
 
-```html
-<a href="#" class="btn btn-outline-primary">
-  Primary
-</a>
-<a href="#" class="btn btn-outline-secondary">
-  Secondary
-</a>
-<a href="#" class="btn btn-outline-success">
-  Success
-</a>
-<a href="#" class="btn btn-outline-warning">
-  Warning
-</a>
-<a href="#" class="btn btn-outline-danger">
-  Danger
-</a>
-<a href="#" class="btn btn-outline-info">
-  Info
-</a>
-<a href="#" class="btn btn-outline-dark">
-  Dark
-</a>
-<a href="#" class="btn btn-outline-light">
-  Light
-</a>
-```
-
 ## Button size
 
 Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
@@ -194,6 +144,7 @@ Icons can be found [**here**](/docs/components/icons)
 
 ```html example centered separated height="7rem"
 <button type="button" class="btn">
+  <!-- SVG icon from http://tabler.io/icons/icon/upload -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
@@ -202,18 +153,21 @@ Icons can be found [**here**](/docs/components/icons)
   </svg> Upload
 </button>
 <button type="button" class="btn btn-warning">
+  <!-- SVG icon from http://tabler.io/icons/icon/heart -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
   </svg> I like
 </button>
 <button type="button" class="btn btn-success">
+  <!-- SVG icon from http://tabler.io/icons/icon/check -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M5 12l5 5l10 -10" />
   </svg> I agree
 </button>
 <button type="button" class="btn btn-primary">
+  <!-- SVG icon from http://tabler.io/icons/icon/plus -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <line x1="12" y1="5" x2="12" y2="19" />
@@ -221,80 +175,53 @@ Icons can be found [**here**](/docs/components/icons)
   </svg> More
 </button>
 <button type="button" class="btn btn-danger">
-  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
-    <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
+  <!-- SVG icon from http://tabler.io/icons/icon/link -->
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-link">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M9 15l6 -6" />
+    <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
+    <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
   </svg> Link
 </button>
 <button type="button" class="btn btn-info">
-  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" />
-    <line x1="12" y1="12" x2="12" y2="12.01" />
-    <line x1="8" y1="12" x2="8" y2="12.01" />
-    <line x1="16" y1="12" x2="16" y2="12.01" />
+  <!-- SVG icon from http://tabler.io/icons/icon/message -->
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-message">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M8 9h8" />
+    <path d="M8 13h6" />
+    <path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z" />
   </svg> Comment
 </button>
 ```
 
-```html
-<button type="button" class="btn">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Upload
-</button>
-<button type="button" class="btn btn-warning">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  I like
-</button>
-<button type="button" class="btn btn-success">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  I agree
-</button>
-<button type="button" class="btn btn-primary">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  More
-</button>
-<button type="button" class="btn btn-danger">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Link
-</button>
-<button type="button" class="btn btn-info">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Comment
-</button>
-```
-
 ## Social buttons
 
 You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
 
 ```html example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-facebook">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
   </svg> Facebook
 </a>
 <a href="#" class="btn btn-twitter">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
   </svg> Twitter
 </a>
 <a href="#" class="btn btn-google">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-google -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8" />
   </svg> Google
 </a>
 <a href="#" class="btn btn-youtube">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-youtube -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <rect x="3" y="5" width="18" height="14" rx="4" />
@@ -302,12 +229,14 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> Youtube
 </a>
 <a href="#" class="btn btn-vimeo">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-vimeo -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" />
   </svg> Vimeo
 </a>
 <a href="#" class="btn btn-dribbble">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-dribbble -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <circle cx="12" cy="12" r="9" />
@@ -317,12 +246,14 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> Dribbble
 </a>
 <a href="#" class="btn btn-github">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
   </svg> Github
 </a>
 <a href="#" class="btn btn-instagram">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-instagram -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <rect x="4" y="4" width="16" height="16" rx="4" />
@@ -331,6 +262,7 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> Instagram
 </a>
 <a href="#" class="btn btn-pinterest">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-pinterest -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <line x1="8" y1="20" x2="12" y2="11" />
@@ -339,12 +271,14 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> Pinterest
 </a>
 <a href="#" class="btn btn-vk">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-vk -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" />
   </svg> VK
 </a>
 <a href="#" class="btn btn-rss">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-rss -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <circle cx="5" cy="19" r="1" />
@@ -353,6 +287,7 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> RSS
 </a>
 <a href="#" class="btn btn-flickr">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-flickr -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <circle cx="7" cy="12" r="3" />
@@ -360,6 +295,7 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> Flickr
 </a>
 <a href="#" class="btn btn-bitbucket">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-bitbucket -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" />
@@ -367,6 +303,7 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> Bitbucket
 </a>
 <a href="#" class="btn btn-tabler">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-tabler -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M8 9l3 3l-3 3" />
@@ -378,99 +315,38 @@ You can use the icons of popular social networking sites, which users are famili
 
 ```html
 <a href="#" class="btn btn-facebook">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
   <svg>...</svg>
   Facebook
 </a>
-<a href="#" class="btn btn-twitter">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
-  <svg>...</svg>
-  Twitter
-</a>
-<a href="#" class="btn btn-google">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Google
-</a>
-<a href="#" class="btn btn-youtube">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Youtube
-</a>
-<a href="#" class="btn btn-vimeo">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Vimeo
-</a>
-<a href="#" class="btn btn-dribbble">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Dribbble
-</a>
-<a href="#" class="btn btn-github">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Github
-</a>
-<a href="#" class="btn btn-instagram">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Instagram
-</a>
-<a href="#" class="btn btn-pinterest">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Pinterest
-</a>
-<a href="#" class="btn btn-vk">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  VK
-</a>
-<a href="#" class="btn btn-rss">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  RSS
-</a>
-<a href="#" class="btn btn-flickr">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Flickr
-</a>
-<a href="#" class="btn btn-bitbucket">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Bitbucket
-</a>
-<a href="#" class="btn btn-tabler">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Tabler
-</a>
 ```
 
 You can also add an icon without the name of a social networking site, if you want to display more buttons on a small space.
 
 ```html example separated scrollable height="7rem"
 <a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
   </svg>
 </a>
-<a href="#" class="btn btn-twitter btn-icon" aria-label="Button">
-  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
+<a href="#" class="btn btn-x btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-x -->
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M4 4l11.733 16h4.267l-11.733 -16z" />
+    <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />
   </svg>
 </a>
 <a href="#" class="btn btn-google btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-google -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8" />
   </svg>
 </a>
 <a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-youtube -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <rect x="3" y="5" width="18" height="14" rx="4" />
@@ -478,12 +354,14 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-vimeo btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-vimeo -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" />
   </svg>
 </a>
 <a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-dribbble -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <circle cx="12" cy="12" r="9" />
@@ -493,12 +371,14 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-github btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
   </svg>
 </a>
 <a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-instagram -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <rect x="4" y="4" width="16" height="16" rx="4" />
@@ -507,6 +387,7 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-pinterest -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <line x1="8" y1="20" x2="12" y2="11" />
@@ -515,12 +396,14 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-vk btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-vk -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" />
   </svg>
 </a>
 <a href="#" class="btn btn-rss btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/rss -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <circle cx="5" cy="19" r="1" />
@@ -529,6 +412,7 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-flickr btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-flickr -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <circle cx="7" cy="12" r="3" />
@@ -536,6 +420,7 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-bitbucket -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" />
@@ -543,6 +428,7 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-tabler btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-tabler -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M8 9l3 3l-3 3" />
@@ -554,59 +440,6 @@ You can also add an icon without the name of a social networking site, if you wa
 
 ```html
 <a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-twitter btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-google btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-google -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-youtube -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-vimeo btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-vimeo -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-dribbble -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-github btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-instagram -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-pinterest -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-vk btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-vk -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-rss btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/rss -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-flickr btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-flickr -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-bitbucket -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-tabler btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-tabler -->
   <svg>...</svg>
 </a>
 ```
@@ -617,18 +450,21 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
 
 ```html example centered separated height="7rem"
 <a href="#" class="btn btn-primary btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/activity -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M3 12h4l3 8l4 -16l3 8h4" />
   </svg>
 </a>
 <a href="#" class="btn btn-github btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
   </svg>
 </a>
 <a href="#" class="btn btn-success btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/bell -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
@@ -636,12 +472,14 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
   </svg>
 </a>
 <a href="#" class="btn btn-warning btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/star -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
   </svg>
 </a>
 <a href="#" class="btn btn-danger btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/trash -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <line x1="4" y1="7" x2="20" y2="7" />
@@ -652,6 +490,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
   </svg>
 </a>
 <a href="#" class="btn btn-purple btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/chart-bar -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <rect x="3" y="12" width="6" height="8" rx="1" />
@@ -661,6 +500,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
   </svg>
 </a>
 <a href="#" class="btn btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/git-merge -->
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <circle cx="7" cy="18" r="2" />
@@ -674,31 +514,6 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
 
 ```html
 <a href="#" class="btn btn-primary btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/activity -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-github btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-success btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/bell -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-warning btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/star -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-danger btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/trash -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-purple btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/chart-bar -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/git-merge -->
   <svg>...</svg>
 </a>
 ```
@@ -707,9 +522,10 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
 
 Create a dropdown button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.
 
-```html example centered separated height="7rem"
+```html example separated height="10rem"
 <div class="dropdown">
   <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
+    <!-- SVG icon from http://tabler.io/icons/icon/calendar -->
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <rect x="4" y="5" width="16" height="16" rx="2" />
@@ -727,6 +543,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
 </div>
 <div class="dropdown">
   <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
+    <!-- SVG icon from http://tabler.io/icons/icon/calendar -->
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
       <rect x="4" y="5" width="16" height="16" rx="2" />
@@ -754,44 +571,11 @@ Create a dropdown button that will encourage users to click for more options. Yo
 ```html
 <div class="dropdown">
   <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-    <!-- SVG icon from http://tabler.io/icons/icon/calendar -->
     <svg>...</svg>
   </button>
   <div class="dropdown-menu">
-    <a class="dropdown-item" href="#">
-      Action
-    </a>
-    <a class="dropdown-item" href="#">
-      Another action
-    </a>
-  </div>
-</div>
-<div class="dropdown">
-  <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-    <!-- SVG icon from http://tabler.io/icons/icon/calendar -->
-    <svg>...</svg>
-    Show calendar
-  </button>
-  <div class="dropdown-menu">
-    <a class="dropdown-item" href="#">
-      Action
-    </a>
-    <a class="dropdown-item" href="#">
-      Another action
-    </a>
-  </div>
-</div>
-<div class="dropdown">
-  <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-    Show calendar
-  </button>
-  <div class="dropdown-menu">
-    <a class="dropdown-item" href="#">
-      Action
-    </a>
-    <a class="dropdown-item" href="#">
-      Another action
-    </a>
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
   </div>
 </div>
 ```
@@ -801,11 +585,6 @@ Create a dropdown button that will encourage users to click for more options. Yo
 Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.
 
 ```html example centered separated height="7rem"
-<a href="#" class="btn btn-primary btn-loading">Button</a>
-<a href="#" class="btn btn-primary btn-loading">Loading button with loooong content</a>
-```
-
-```html
 <a href="#" class="btn btn-primary btn-loading">
   Button
 </a>
@@ -815,12 +594,6 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
 ```
 
 ```html example centered height="7rem"
-<a href="#" class="btn btn-primary">
-  <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
-</a>
-```
-
-```html
 <a href="#" class="btn btn-primary">
   <span class="spinner-border spinner-border-sm me-2" role="status"></span>
   Button
@@ -895,24 +668,12 @@ Use buttons with avatars to simplify the process of interaction and make your de
 
 ```html example centered separated height="7rem"
 <a href="#" class="btn">
-  <span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1542534759-05f6c34a9e63?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar
-</a>
-<a href="#" class="btn">
-  <span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1546539782-6fc531453083?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar
-</a>
-<a href="#" class="btn">
-  <span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1541585452861-0375331f10bf?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar
-</a>
-```
-
-```html
-<a href="#" class="btn">
-  <span class="avatar" style="background-image: url(...)"></span> Avatar
+  <span class="avatar" style="background-image: url(https://images.unsplash.com/photo-1542534759-05f6c34a9e63?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)"></span> Avatar
 </a>
 <a href="#" class="btn">
-  <span class="avatar" style="background-image: url(...)"></span> Avatar
+  <span class="avatar" style="background-image: url(https://images.unsplash.com/photo-1546539782-6fc531453083?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)"></span> Avatar
 </a>
 <a href="#" class="btn">
-  <span class="avatar" style="background-image: url(...)"></span> Avatar
+  <span class="avatar" style="background-image: url(https://images.unsplash.com/photo-1541585452861-0375331f10bf?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)"></span> Avatar
 </a>
 ```