@tabler/core 1.0.0-beta22 → 1.0.0-beta24

package/docs/ui/components/buttons.mdx

@@ -1,14 +1,15 @@
 ---
 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.
+summary: 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.
 bootstrapLink: components/buttons/
+description: Customizable buttons for user actions.
 ---
 
 ## Button tag
 
 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 `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.
 
-```html example code centered separated height="7rem"
+```html example centered separated height="7rem"
 <a href="#" class="btn" role="button">Link</a>
 <button class="btn">Button</button>
 <input type="button" class="btn" value="Input" />
@@ -20,7 +21,7 @@ As one of the most common elements of UI design, buttons have a very important f
 
 The standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page.
 
-```html example code centered separated height="7rem"
+```html example centered separated height="7rem"
 <a href="#" class="btn" role="button">Link</a>
 ```
 
@@ -28,7 +29,7 @@ The standard button creates a white background and subtle hover animation. It's
 
 Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons' purpose and make them easy to spot.
 
-```html code example vertical centered separated scrollable height="15rem"
+```html example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-primary">Primary</a>
 <a href="#" class="btn btn-secondary">Secondary</a>
 <a href="#" class="btn btn-success">Success</a>
@@ -43,7 +44,7 @@ Use the button classes that correspond to the function of your button. The big r
 
 Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.
 
-```html code example vertical centered separated scrollable height="15rem"
+```html example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-primary disabled">Primary</a>
 <a href="#" class="btn btn-secondary disabled">Secondary</a>
 <a href="#" class="btn btn-success disabled">Success</a>
@@ -58,7 +59,7 @@ Make buttons look inactive to show that an action is possible once the user meet
 
 Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.
 
-```html code example vertical centered separated scrollable height="15rem"
+```html example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-blue">Blue</a>
 <a href="#" class="btn btn-azure">Azure</a>
 <a href="#" class="btn btn-indigo">Indigo</a>
@@ -85,7 +86,9 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically 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>
-<div class="p-2 bg-dark"><a href="#" class="btn btn-ghost-light">Light</a></div>
+<div class="p-2 bg-dark">
+  <a href="#" class="btn btn-ghost-light">Light</a>
+</div>
 ```
 
 ```html
@@ -173,12 +176,12 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want
 
 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.
 
-```html code example centered separated height="8rem"
+```html example centered separated height="8rem"
 <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-lg">Large button</button>
 ```
 
-```html code example centered separated height="7rem"
+```html example centered separated height="7rem"
 <button type="button" class="btn btn-primary btn-sm">Small button</button>
 <button type="button" class="btn btn-sm">Small button</button>
 ```
@@ -190,37 +193,49 @@ Label your button with text and add an icon to communiacate the action and make
 Icons can be found [**here**](/docs/components/icons)
 
 ```html example centered separated height="7rem"
-<button type="button" class="btn"><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">
+<button type="button" class="btn">
+  <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" />
     <polyline points="7 9 12 4 17 9" />
     <line x1="12" y1="4" x2="12" y2="16" />
-  </svg> Upload</button>
-<button type="button" class="btn btn-warning"><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">
+  </svg> Upload
+</button>
+<button type="button" class="btn btn-warning">
+  <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 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">
+  </svg> I like
+</button>
+<button type="button" class="btn btn-success">
+  <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 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">
+  </svg> I agree
+</button>
+<button type="button" class="btn btn-primary">
+  <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" />
     <line x1="5" y1="12" x2="19" y2="12" />
-  </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">
+  </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> 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">
+  </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> Comment</button>
+  </svg> Comment
+</button>
 ```
 
 ```html
@@ -261,86 +276,114 @@ Icons can be found [**here**](/docs/components/icons)
 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 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">
+<a href="#" class="btn btn-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 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">
+  </svg> Facebook
+</a>
+<a href="#" class="btn btn-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 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">
+  </svg> Twitter
+</a>
+<a href="#" class="btn btn-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 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">
+  </svg> Google
+</a>
+<a href="#" class="btn btn-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" />
     <path d="M10 9l5 3l-5 3z" />
-  </svg> Youtube</a>
-<a href="#" class="btn btn-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">
+  </svg> Youtube
+</a>
+<a href="#" class="btn btn-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 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">
+  </svg> Vimeo
+</a>
+<a href="#" class="btn btn-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" />
     <path d="M9 3.6c5 6 7 10.5 7.5 16.2" />
     <path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4" />
     <path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5" />
-  </svg> Dribbble</a>
-<a href="#" class="btn btn-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">
+  </svg> Dribbble
+</a>
+<a href="#" class="btn btn-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 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">
+  </svg> Github
+</a>
+<a href="#" class="btn btn-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" />
     <circle cx="12" cy="12" r="3" />
     <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
-  </svg> Instagram</a>
-<a href="#" class="btn btn-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">
+  </svg> Instagram
+</a>
+<a href="#" class="btn btn-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" />
     <path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" />
     <circle cx="12" cy="12" r="9" />
-  </svg> Pinterest</a>
-<a href="#" class="btn btn-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">
+  </svg> Pinterest
+</a>
+<a href="#" class="btn btn-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 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">
+  </svg> VK
+</a>
+<a href="#" class="btn btn-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" />
     <path d="M4 4a16 16 0 0 1 16 16" />
     <path d="M4 11a9 9 0 0 1 9 9" />
-  </svg> RSS</a>
-<a href="#" class="btn btn-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">
+  </svg> RSS
+</a>
+<a href="#" class="btn btn-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" />
     <circle cx="17" cy="12" r="3" />
-  </svg> Flickr</a>
-<a href="#" class="btn btn-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">
+  </svg> Flickr
+</a>
+<a href="#" class="btn btn-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" />
     <path d="M14 15h-4l-1 -6h6z" />
-  </svg> Bitbucket</a>
-<a href="#" class="btn btn-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">
+  </svg> Bitbucket
+</a>
+<a href="#" class="btn btn-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" />
     <line x1="13" y1="15" x2="16" y2="15" />
     <rect x="4" y="4" width="16" height="16" rx="4" />
-  </svg> Tabler</a>
+  </svg> Tabler
+</a>
 ```
 
 ```html
 <a href="#" class="btn btn-facebook">
-  <!-- SVG icon from http://tabler-icons.io/i/brand-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-icons.io/i/brand-twitter -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
   <svg>...</svg>
   Twitter
 </a>
@@ -511,59 +554,59 @@ 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-icons.io/i/brand-facebook -->
+  <!-- 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-icons.io/i/brand-twitter -->
+  <!-- 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-icons.io/i/brand-google -->
+  <!-- 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-icons.io/i/brand-youtube -->
+  <!-- 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-icons.io/i/brand-vimeo -->
+  <!-- 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-icons.io/i/brand-dribbble -->
+  <!-- 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-icons.io/i/brand-github -->
+  <!-- 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-icons.io/i/brand-instagram -->
+  <!-- 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-icons.io/i/brand-pinterest -->
+  <!-- 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-icons.io/i/brand-vk -->
+  <!-- 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-icons.io/i/rss -->
+  <!-- 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-icons.io/i/brand-flickr -->
+  <!-- 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-icons.io/i/brand-bitbucket -->
+  <!-- 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-icons.io/i/brand-tabler -->
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-tabler -->
   <svg>...</svg>
 </a>
 ```
@@ -631,31 +674,31 @@ 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-icons.io/i/activity -->
+  <!-- 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-icons.io/i/brand-github -->
+  <!-- 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-icons.io/i/bell -->
+  <!-- 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-icons.io/i/star -->
+  <!-- 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-icons.io/i/trash -->
+  <!-- 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-icons.io/i/chart-bar -->
+  <!-- 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-icons.io/i/git-merge -->
+  <!-- SVG icon from http://tabler.io/icons/icon/git-merge -->
   <svg>...</svg>
 </a>
 ```
@@ -666,7 +709,8 @@ Create a dropdown button that will encourage users to click for more options. Yo
 
 ```html example centered separated height="7rem"
 <div class="dropdown">
-  <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"><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">
+  <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
+    <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" />
       <line x1="16" y1="3" x2="16" y2="7" />
@@ -674,14 +718,16 @@ Create a dropdown button that will encourage users to click for more options. Yo
       <line x1="4" y1="11" x2="20" y2="11" />
       <line x1="11" y1="15" x2="12" y2="15" />
       <line x1="12" y1="15" x2="12" y2="18" />
-    </svg></button>
+    </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 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">
+  <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
+    <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" />
       <line x1="16" y1="3" x2="16" y2="7" />
@@ -689,7 +735,8 @@ Create a dropdown button that will encourage users to click for more options. Yo
       <line x1="4" y1="11" x2="20" y2="11" />
       <line x1="11" y1="15" x2="12" y2="15" />
       <line x1="12" y1="15" x2="12" y2="18" />
-    </svg> Show calendar</button>
+    </svg> Show calendar
+  </button>
   <div class="dropdown-menu">
     <a class="dropdown-item" href="#">Action</a>
     <a class="dropdown-item" href="#">Another action</a>
@@ -707,7 +754,7 @@ 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-icons.io/i/calendar -->
+    <!-- SVG icon from http://tabler.io/icons/icon/calendar -->
     <svg>...</svg>
   </button>
   <div class="dropdown-menu">
@@ -721,7 +768,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-icons.io/i/calendar -->
+    <!-- SVG icon from http://tabler.io/icons/icon/calendar -->
     <svg>...</svg>
     Show calendar
   </button>
@@ -768,7 +815,9 @@ 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>
+<a href="#" class="btn btn-primary">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
+</a>
 ```
 
 ```html
@@ -782,7 +831,7 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
 
 Create a list of buttons using the `.btn-list` container to display different actions a user can take. If you add aditional styling, such as colours, you will be able to focus users' attention on a particular action or suggest the result.
 
-```html code example vertical centered columns={3} height="7rem"
+```html example vertical centered columns={3} height="7rem"
 <div class="btn-list">
   <a href="#" class="btn btn-success">Save changes</a>
   <a href="#" class="btn">Save and continue</a>
@@ -792,7 +841,7 @@ Create a list of buttons using the `.btn-list` container to display different ac
 
 If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.
 
-```html code example centered
+```html example centered
 <div class="btn-list">
   <a href="#" class="btn">One</a>
   <a href="#" class="btn">Two</a>
@@ -818,21 +867,21 @@ If the list is long, it will be wrapped and some buttons will be moved to the ne
 
 Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.
 
-```html code example vertical centered columns={3} height="7rem"
+```html example vertical centered columns={3} height="7rem"
 <div class="btn-list justify-content-center">
   <a href="#" class="btn">Save and continue</a>
   <a href="#" class="btn btn-primary">Save changes</a>
 </div>
 ```
 
-```html code example vertical centered columns={3} height="7rem"
+```html example vertical centered columns={3} height="7rem"
 <div class="btn-list justify-content-end">
   <a href="#" class="btn">Save and continue</a>
   <a href="#" class="btn btn-primary">Save changes</a>
 </div>
 ```
 
-```html code example vertical centered columns={3} height="7rem"
+```html example vertical centered columns={3} height="7rem"
 <div class="btn-list">
   <a href="#" class="btn btn-outline-danger me-auto">Delete</a>
   <a href="#" class="btn">Save and continue</a>
@@ -845,9 +894,15 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
 Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
 
 ```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>
+<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