SMusatov
/
tabler
mirror of https://github.com/tabler/tabler.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737
							<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-beta4
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-->
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Buttons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
    <!-- CSS files -->
    <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
  <body class="antialiased">
    <div class="wrapper">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
            <span class="navbar-toggler-icon"></span>
          </button>
          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
            <a href="..">
              <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
            </a>
          </h1>
          <div class="navbar-nav flex-row order-md-last">
            <div class="nav-item d-none d-md-flex me-3">
              <div class="btn-list">
                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" 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>
                  Source code
                </a>
                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" 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 13.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>
                  Sponsor
                </a>
              </div>
            </div>
            <div class="nav-item dropdown d-none d-md-flex me-3">
              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                <!-- Download SVG icon from http://tabler-icons.io/i/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" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
                <span class="badge bg-red"></span>
              </a>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
                <div class="card">
                  <div class="card-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
                  </div>
                </div>
              </div>
            </div>
            <div class="nav-item dropdown">
              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                <div class="d-none d-xl-block ps-2">
                  <div>Paweł Kuna</div>
                  <div class="mt-1 small text-muted">UI Designer</div>
                </div>
              </a>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                <a href="#" class="dropdown-item">Set status</a>
                <a href="#" class="dropdown-item">Profile & account</a>
                <a href="#" class="dropdown-item">Feedback</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Settings</a>
                <a href="#" class="dropdown-item">Logout</a>
              </div>
            </div>
          </div>
        </div>
      </header>
      <div class="navbar-expand-md">
        <div class="collapse navbar-collapse" id="navbar-menu">
          <div class="navbar navbar-light">
            <div class="container-xl">
              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="../index.html" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                      <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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Home
                    </span>
                  </a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
                      <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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Interface
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <div class="dropdown-menu-columns">
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="../empty.html" >
                          Empty page
                        </a>
                        <a class="dropdown-item" href="../accordion.html" >
                          Accordion
                        </a>
                        <a class="dropdown-item" href="../blank.html" >
                          Blank page
                        </a>
                        <a class="dropdown-item" href="../buttons.html" >
                          Buttons
                        </a>
                        <a class="dropdown-item" href="../cards.html" >
                          Cards
                        </a>
                        <a class="dropdown-item" href="../cards-masonry.html" >
                          Cards Masonry
                        </a>
                        <a class="dropdown-item" href="../colors.html" >
                          Colors
                        </a>
                        <a class="dropdown-item" href="../dropdowns.html" >
                          Dropdowns
                        </a>
                        <a class="dropdown-item" href="../icons.html" >
                          Icons
                        </a>
                        <a class="dropdown-item" href="../modals.html" >
                          Modals
                        </a>
                        <a class="dropdown-item" href="../maps.html" >
                          Maps
                        </a>
                        <a class="dropdown-item" href="../map-fullsize.html" >
                          Map fullsize
                        </a>
                        <a class="dropdown-item" href="../maps-vector.html" >
                          Vector maps
                        </a>
                      </div>
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="../navigation.html" >
                          Navigation
                        </a>
                        <a class="dropdown-item" href="../charts.html" >
                          Charts
                        </a>
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
                        <a class="dropdown-item" href="../skeleton.html" >
                          Skeleton
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
                        </a>
                        <a class="dropdown-item" href="../tables.html" >
                          Tables
                        </a>
                        <a class="dropdown-item" href="../carousel.html" >
                          Carousel
                        </a>
                        <a class="dropdown-item" href="../lists.html" >
                          Lists
                        </a>
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
                        <a class="dropdown-item" href="../offcanvas.html" >
                          Offcanvas
                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                            Authentication
                          </a>
                          <div class="dropdown-menu">
                            <a href="../sign-in.html" class="dropdown-item">Sign in</a>
                            <a href="../sign-up.html" class="dropdown-item">Sign up</a>
                            <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
                            <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
                            <a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
                          </div>
                        </div>
                        <div class="dropend">
                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                            Error pages
                          </a>
                          <div class="dropdown-menu">
                            <a href="../error-404.html" class="dropdown-item">404 page</a>
                            <a href="../error-500.html" class="dropdown-item">500 page</a>
                            <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="../form-elements.html" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
                      <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"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Form elements
                    </span>
                  </a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/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>
                    </span>
                    <span class="nav-link-title">
                      Extra
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="../activity.html" >
                      Activity
                    </a>
                    <a class="dropdown-item" href="../gallery.html" >
                      Gallery
                    </a>
                    <a class="dropdown-item" href="../invoice.html" >
                      Invoice
                    </a>
                    <a class="dropdown-item" href="../search-results.html" >
                      Search results
                    </a>
                    <a class="dropdown-item" href="../pricing.html" >
                      Pricing cards
                    </a>
                    <a class="dropdown-item" href="../users.html" >
                      Users
                    </a>
                    <a class="dropdown-item" href="../license.html" >
                      License
                    </a>
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
                    <a class="dropdown-item" href="../wizard.html" >
                      Wizard
                    </a>
                  </div>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
                      <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="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Layout
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <div class="dropdown-menu-columns">
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="../layout-horizontal.html" >
                          Horizontal
                        </a>
                        <a class="dropdown-item" href="../layout-vertical.html" >
                          Vertical
                        </a>
                        <a class="dropdown-item" href="../layout-vertical-transparent.html" >
                          Vertical transparent
                        </a>
                        <a class="dropdown-item" href="../layout-vertical-right.html" >
                          Right vertical
                        </a>
                        <a class="dropdown-item" href="../layout-condensed.html" >
                          Condensed
                        </a>
                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
                          Condensed dark
                        </a>
                        <a class="dropdown-item" href="../layout-combo.html" >
                          Combined
                        </a>
                      </div>
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="../layout-navbar-dark.html" >
                          Navbar dark
                        </a>
                        <a class="dropdown-item" href="../layout-navbar-sticky.html" >
                          Navbar sticky
                        </a>
                        <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                          Navbar overlap
                        </a>
                        <a class="dropdown-item" href="../layout-dark.html" >
                          Dark mode
                        </a>
                        <a class="dropdown-item" href="../layout-rtl.html" >
                          RTL mode
                        </a>
                        <a class="dropdown-item" href="../layout-fluid.html" >
                          Fluid
                        </a>
                        <a class="dropdown-item" href="../layout-fluid-vertical.html" >
                          Fluid vertical
                        </a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item active">
                  <a class="nav-link" href="../docs/index.html" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
                      <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 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Documentation
                    </span>
                  </a>
                </li>
              </ul>
              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                <form action="." method="get">
                  <div class="input-icon">
                    <span class="input-icon-addon">
                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
                      <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="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
                    </span>
                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page-wrapper">
        <div class="container-xl">
          <!-- Page title -->
          <div class="page-header d-print-none">
            <div class="row align-items-center">
              <div class="col">
                <h2 class="page-title">
                  Documentation
                </h2>
              </div>
            </div>
          </div>
        </div>
        <div class="page-body">
          <div class="container-xl">
            <div class="row gx-lg-4">
              <div class="d-none d-lg-block col-lg-3">
                <ul class="nav nav-pills nav-vertical">
                  <li class="nav-item">
                    <a href="../docs/" class="nav-link">
                      Introduction
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                      Getting started
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse" id="menu-base">
                      <li class="nav-item">
                        <a href="../docs/getting-started.html" class="nav-link">
                          Getting Started
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/download.html" class="nav-link">
                          Download
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/browser-support.html" class="nav-link">
                          Browser Support
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                      Content
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse" id="menu-content">
                      <li class="nav-item">
                        <a href="../docs/colors.html" class="nav-link">
                          Colors
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/typography.html" class="nav-link">
                          Typography
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/icons.html" class="nav-link">
                          Icons
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-layout" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                      Layout
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse" id="menu-layout">
                      <li class="nav-item">
                        <a href="../docs/page-headers.html" class="nav-link">
                          Page headers
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                      Form components
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse" id="menu-forms">
                      <li class="nav-item">
                        <a href="../docs/form-elements.html" class="nav-link">
                          Form elements
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/form-helpers.html" class="nav-link">
                          Form helpers
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/form-validation.html" class="nav-link">
                          Validation states
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/form-image-check.html" class="nav-link">
                          Image check
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/form-color-check.html" class="nav-link">
                          Color check
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/form-selectboxes.html" class="nav-link">
                          Form selectboxes
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/form-fieldset.html" class="nav-link">
                          Form fieldset
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
                      Components
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse show" id="menu-components">
                      <li class="nav-item">
                        <a href="../docs/alerts.html" class="nav-link">
                          Alerts
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/avatars.html" class="nav-link">
                          Avatars
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/badges.html" class="nav-link">
                          Badges
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/breadcrumb.html" class="nav-link">
                          Breadcrumb
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/buttons.html" class="nav-link active">
                          Buttons
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/cards.html" class="nav-link">
                          Cards
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/carousel.html" class="nav-link">
                          Carousel
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/dropdowns.html" class="nav-link">
                          Dropdowns
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/divider.html" class="nav-link">
                          Divider
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/empty.html" class="nav-link">
                          Empty states
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/modals.html" class="nav-link">
                          Modals
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/page-headers.html" class="nav-link">
                          Page headers
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/progress.html" class="nav-link">
                          Progress
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/range-slider.html" class="nav-link">
                          Range slider
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/ribbons.html" class="nav-link">
                          Ribbons
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/skeleton.html" class="nav-link">
                          Skeleton
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/spinners.html" class="nav-link">
                          Spinners
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/switch-icon.html" class="nav-link">
                          Switch icon
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/tables.html" class="nav-link">
                          Tables
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/tabs.html" class="nav-link">
                          Tabs
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/timelines.html" class="nav-link">
                          Timelines
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/toasts.html" class="nav-link">
                          Toasts
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/tooltips.html" class="nav-link">
                          Tooltips
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                      Utilities
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse" id="menu-utils">
                      <li class="nav-item">
                        <a href="../docs/borders.html" class="nav-link">
                          Borders
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/cursors.html" class="nav-link">
                          Cursors
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/interactions.html" class="nav-link">
                          Interactions
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                      Plugins
                      <span class="nav-link-toggle"></span>
                    </a>
                    <ul class="nav nav-pills collapse" id="menu-plugins">
                      <li class="nav-item">
                        <a href="../docs/autosize.html" class="nav-link">
                          Autosize
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/input-mask.html" class="nav-link">
                          Form input mask
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/flags.html" class="nav-link">
                          Flags
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/payments.html" class="nav-link">
                          Payments
                        </a>
                      </li>
                      <li class="nav-item">
                        <a href="../docs/charts.html" class="nav-link">
                          Charts
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="col-lg-9">
                <div class="card card-lg">
                  <div class="card-body">
                    <div class="markdown">
                      <div>
                        <div class="d-flex mb-3">
                          <h1 class="m-0">Buttons</h1>
                          <p class="ms-auto">
                            <a href="https://getbootstrap.com/docs/5.0/components/buttons/" target="_blank" class="d-flex align-items-center">
                              <!-- Download SVG icon from http://tabler-icons.io/i/external-link -->
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                              Bootstrap documentation
                            </a>
                          </p>
                        </div>
                        <p>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.</p>
                      </div>
                      <h2 id="button-tag">Button tag</h2>
                      <p>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 <code class="language-plaintext highlighter-rouge">.btn</code> classes with the <code class="language-plaintext highlighter-rouge">&lt;button&gt;</code> element and add additional styling that will make your buttons serve their purpose and draw users’ attention.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn" role="button">Link</a>
                            <button class="btn">Button</button>
                            <input type="button" class="btn" value="Input" />
                            <input type="submit" class="btn" value="Submit" />
                            <input type="reset" class="btn" value="Reset" />
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">value=</span><span class="s">"Input"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">value=</span><span class="s">"Submit"</span><span class="nt">/&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"reset"</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">value=</span><span class="s">"Reset"</span><span class="nt">/&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="default-button">Default button</h2>
                      <p>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.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn" role="button">Link</a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">&gt;</span>Link<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="button-variations">Button variations</h2>
                      <p>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.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn btn-primary">
                              Primary
                            </a>
                            <a href="javascript:void(0)" class="btn btn-secondary">
                              Secondary
                            </a>
                            <a href="javascript:void(0)" class="btn btn-success">
                              Success
                            </a>
                            <a href="javascript:void(0)" class="btn btn-warning">
                              Warning
                            </a>
                            <a href="javascript:void(0)" class="btn btn-danger">
                              Danger
                            </a>
                            <a href="javascript:void(0)" class="btn btn-info">
                              Info
                            </a>
                            <a href="javascript:void(0)" class="btn btn-light">
                              Light
                            </a>
                            <a href="javascript:void(0)" class="btn btn-dark">
                              Dark
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
  Primary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>
  Secondary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>
  Success
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">&gt;</span>
  Warning
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">&gt;</span>
  Danger
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">&gt;</span>
  Info
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-light"</span><span class="nt">&gt;</span>
  Light
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-dark"</span><span class="nt">&gt;</span>
  Dark
<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="disabled-buttons">Disabled buttons</h2>
                      <p>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.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn btn-primary disabled">
                              Primary
                            </a>
                            <a href="javascript:void(0)" class="btn btn-secondary disabled">
                              Secondary
                            </a>
                            <a href="javascript:void(0)" class="btn btn-success disabled">
                              Success
                            </a>
                            <a href="javascript:void(0)" class="btn btn-warning disabled">
                              Warning
                            </a>
                            <a href="javascript:void(0)" class="btn btn-danger disabled">
                              Danger
                            </a>
                            <a href="javascript:void(0)" class="btn btn-info disabled">
                              Info
                            </a>
                            <a href="javascript:void(0)" class="btn btn-light disabled">
                              Light
                            </a>
                            <a href="javascript:void(0)" class="btn btn-dark disabled">
                              Dark
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary disabled"</span><span class="nt">&gt;</span>
  Primary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary disabled"</span><span class="nt">&gt;</span>
  Secondary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success disabled"</span><span class="nt">&gt;</span>
  Success
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-warning disabled"</span><span class="nt">&gt;</span>
  Warning
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger disabled"</span><span class="nt">&gt;</span>
  Danger
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-info disabled"</span><span class="nt">&gt;</span>
  Info
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-light disabled"</span><span class="nt">&gt;</span>
  Light
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-dark disabled"</span><span class="nt">&gt;</span>
  Dark
<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="color-variations">Color variations</h2>
                      <p>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.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn btn-blue">Blue</a>
                            <a href="javascript:void(0)" class="btn btn-azure">Azure</a>
                            <a href="javascript:void(0)" class="btn btn-indigo">Indigo</a>
                            <a href="javascript:void(0)" class="btn btn-purple">Purple</a>
                            <a href="javascript:void(0)" class="btn btn-pink">Pink</a>
                            <a href="javascript:void(0)" class="btn btn-red">Red</a>
                            <a href="javascript:void(0)" class="btn btn-orange">Orange</a>
                            <a href="javascript:void(0)" class="btn btn-yellow">Yellow</a>
                            <a href="javascript:void(0)" class="btn btn-lime">Lime</a>
                            <a href="javascript:void(0)" class="btn btn-green">Green</a>
                            <a href="javascript:void(0)" class="btn btn-teal">Teal</a>
                            <a href="javascript:void(0)" class="btn btn-cyan">Cyan</a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-blue"</span><span class="nt">&gt;</span>Blue<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-azure"</span><span class="nt">&gt;</span>Azure<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-indigo"</span><span class="nt">&gt;</span>Indigo<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-purple"</span><span class="nt">&gt;</span>Purple<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pink"</span><span class="nt">&gt;</span>Pink<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-red"</span><span class="nt">&gt;</span>Red<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-orange"</span><span class="nt">&gt;</span>Orange<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-yellow"</span><span class="nt">&gt;</span>Yellow<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-lime"</span><span class="nt">&gt;</span>Lime<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-green"</span><span class="nt">&gt;</span>Green<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-teal"</span><span class="nt">&gt;</span>Teal<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-cyan"</span><span class="nt">&gt;</span>Cyan<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="ghost-buttons">Ghost buttons</h2>
                      <p>Use the <code class="language-plaintext highlighter-rouge">.btn-ghost-*</code> class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users’ attention on the website’s primary design, at the same time encouraging them to take action.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn btn-ghost-primary">Primary</a>
                            <a href="javascript:void(0)" class="btn btn-ghost-secondary">Secondary</a>
                            <a href="javascript:void(0)" class="btn btn-ghost-success">Success</a>
                            <a href="javascript:void(0)" class="btn btn-ghost-warning">Warning</a>
                            <a href="javascript:void(0)" class="btn btn-ghost-danger">Danger</a>
                            <a href="javascript:void(0)" class="btn btn-ghost-info">Info</a>
                            <a href="javascript:void(0)" class="btn btn-ghost-light">Light</a>
                            <a href="javascript:void(0)" class="btn btn-ghost-dark">Dark</a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-ghost-primary"</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-ghost-secondary"</span><span class="nt">&gt;</span>Secondary<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-ghost-success"</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-ghost-warning"</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-ghost-danger"</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-ghost-info"</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-ghost-light"</span><span class="nt">&gt;</span>Light<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-ghost-dark"</span><span class="nt">&gt;</span>Dark<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="square-buttons">Square buttons</h2>
                      <p>Use the <code class="language-plaintext highlighter-rouge">.btn-square</code> class to remove the border radius, if you want the corners of your button to be square rather than rounded.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn btn-white btn-square">
                              White
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-square"</span><span class="nt">&gt;</span>
  White
<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="pill-buttons">Pill buttons</h2>
                      <p>Add the <code class="language-plaintext highlighter-rouge">.btn-pill</code> class to your button to make it rounded and give it a modern and attractive look.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn btn-white btn-pill">
                              White
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-pill"</span><span class="nt">&gt;</span>
  White
<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="outline-buttons">Outline buttons</h2>
                      <p>Replace the default modifier class with the <code class="language-plaintext highlighter-rouge">.btn-outline-*</code> 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.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"></code></pre>
                        </figure>
                      </div>
                      <h2 id="button-size">Button size</h2>
                      <p>Add <code class="language-plaintext highlighter-rouge">.btn-lg</code> or <code class="language-plaintext highlighter-rouge">.btn-sm</code> 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.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <button type="button" class="btn btn-primary btn-lg">Large button</button>
                            <button type="button" class="btn btn-lg">Large button</button>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg"</span><span class="nt">&gt;</span>Large button<span class="nt">&lt;/button&gt;</span></code></pre>
                        </figure>
                      </div>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <button type="button" class="btn btn-primary btn-sm">Small button</button>
                            <button type="button" class="btn btn-sm">Small button</button>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-sm"</span><span class="nt">&gt;</span>Small button<span class="nt">&lt;/button&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="buttons-with-icons">Buttons with icons</h2>
                      <p>Label your button with text and add an icon to communiacate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and atractive look.</p>
                      <p>Icons can be found <a href="/docs/icons.html#icons"><strong>here</strong></a></p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <button type="button" class="btn">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><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">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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 13.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">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                              More
                            </button>
                            <button type="button" class="btn btn-danger">
                              <!-- Download SVG icon from http://tabler-icons.io/i/link -->
                              <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">
                              <!-- Download SVG icon from http://tabler-icons.io/i/message-circle -->
                              <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>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/upload --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Upload
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/heart --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  I like
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/check --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  I agree
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/plus --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  More
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/link --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Link
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/message-circle --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Comment
<span class="nt">&lt;/button&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="social-buttons">Social buttons</h2>
                      <p>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.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn btn-facebook">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="javascript:void(0)" class="btn btn-twitter">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="javascript:void(0)" class="btn btn-google">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="javascript:void(0)" class="btn btn-youtube">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><path d="M10 9l5 3l-5 3z" /></svg>
                              Youtube
                            </a>
                            <a href="javascript:void(0)" class="btn btn-vimeo">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="javascript:void(0)" class="btn btn-dribbble">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><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="javascript:void(0)" class="btn btn-github">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="javascript:void(0)" class="btn btn-instagram">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><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="javascript:void(0)" class="btn btn-pinterest">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><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="javascript:void(0)" class="btn btn-vk">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="M10 6h2v12c-4.5 -1 -8 -6.5 -9 -12" /><path d="M20 6c-1 2 -3 5 -5 6h-3" /><path d="M20 18c-1 -2 -3 -5 -5 -6" /></svg>
                              VK
                            </a>
                            <a href="javascript:void(0)" class="btn btn-rss">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="javascript:void(0)" class="btn btn-flickr">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><circle cx="17" cy="12" r="3" /></svg>
                              Flickr
                            </a>
                            <a href="javascript:void(0)" class="btn btn-bitbucket">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><path d="M14 15h-4l-1 -6h6z" /></svg>
                              Bitbucket
                            </a>
                            <a href="javascript:void(0)" class="btn btn-tabler">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
                              Tabler
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-facebook"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Facebook
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-twitter"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Twitter
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-google"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-google --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Google
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-youtube"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-youtube --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Youtube
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-vimeo"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-vimeo --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Vimeo
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-dribbble"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-dribbble --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Dribbble
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-github"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-github --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Github
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-instagram"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-instagram --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Instagram
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pinterest"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-pinterest --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Pinterest
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-vk"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-vk --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  VK
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-rss"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/rss --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  RSS
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-flickr"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-flickr --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Flickr
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-bitbucket"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-bitbucket --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Bitbucket
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-tabler"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-tabler --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
  Tabler
<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                      <p>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.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn btn-facebook btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="javascript:void(0)" class="btn btn-twitter btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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>
                            </a>
                            <a href="javascript:void(0)" class="btn btn-google btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="javascript:void(0)" class="btn btn-youtube btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><path d="M10 9l5 3l-5 3z" /></svg>
                            </a>
                            <a href="javascript:void(0)" class="btn btn-vimeo btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="javascript:void(0)" class="btn btn-dribbble btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><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>
                            </a>
                            <a href="javascript:void(0)" class="btn btn-github btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="javascript:void(0)" class="btn btn-instagram btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><circle cx="12" cy="12" r="3" /><line x1="16.5" y1="7.5" x2="16.5" y2="7.501" /></svg>
                            </a>
                            <a href="javascript:void(0)" class="btn btn-pinterest btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><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>
                            </a>
                            <a href="javascript:void(0)" class="btn btn-vk btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="M10 6h2v12c-4.5 -1 -8 -6.5 -9 -12" /><path d="M20 6c-1 2 -3 5 -5 6h-3" /><path d="M20 18c-1 -2 -3 -5 -5 -6" /></svg>
                            </a>
                            <a href="javascript:void(0)" class="btn btn-rss btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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>
                            </a>
                            <a href="javascript:void(0)" class="btn btn-flickr btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><circle cx="17" cy="12" r="3" /></svg>
                            </a>
                            <a href="javascript:void(0)" class="btn btn-bitbucket btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><path d="M14 15h-4l-1 -6h6z" /></svg>
                            </a>
                            <a href="javascript:void(0)" class="btn btn-tabler btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-facebook btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-facebook --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-twitter btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-google btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-google --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-youtube btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-youtube --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-vimeo btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-vimeo --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-dribbble btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-dribbble --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-github btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-github --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-instagram btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-instagram --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pinterest btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-pinterest --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-vk btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-vk --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-rss btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/rss --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-flickr btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-flickr --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-bitbucket btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-bitbucket --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-tabler btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-tabler --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="icon-buttons">Icon buttons</h2>
                      <p>Add the <code class="language-plaintext highlighter-rouge">.btn-icon</code> class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn btn-primary btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="javascript:void(0)" class="btn btn-github btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="javascript:void(0)" class="btn btn-success btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
                            </a>
                            <a href="javascript:void(0)" class="btn btn-warning btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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="javascript:void(0)" class="btn btn-danger btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>
                            </a>
                            <a href="javascript:void(0)" class="btn btn-purple btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><rect x="9" y="8" width="6" height="12" rx="1" /><rect x="15" y="4" width="6" height="16" rx="1" /><line x1="4" y1="20" x2="18" y2="20" /></svg>
                            </a>
                            <a href="javascript:void(0)" class="btn btn-white btn-icon" aria-label="Button">
                              <!-- Download SVG icon from http://tabler-icons.io/i/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" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="12" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M7 8a4 4 0 0 0 4 4h4" /></svg>
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/activity --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-github btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-github --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/bell --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-warning btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/star --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/trash --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-purple btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/chart-bar --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/git-merge --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="dropdown-buttons">Dropdown buttons</h2>
                      <p>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.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <div class="dropdown">
                              <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                                <!-- Download SVG icon from http://tabler-icons.io/i/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" /><line x1="16" y1="3" x2="16" y2="7" /><line x1="8" y1="3" x2="8" y2="7" /><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>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="javascript:void(0)">
                                  Action
                                </a>
                                <a class="dropdown-item" href="javascript:void(0)">
                                  Another action
                                </a>
                              </div>
                            </div>
                            <div class="dropdown">
                              <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                                <!-- Download SVG icon from http://tabler-icons.io/i/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" /><line x1="16" y1="3" x2="16" y2="7" /><line x1="8" y1="3" x2="8" y2="7" /><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>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="javascript:void(0)">
                                  Action
                                </a>
                                <a class="dropdown-item" href="javascript:void(0)">
                                  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="javascript:void(0)">
                                  Action
                                </a>
                                <a class="dropdown-item" href="javascript:void(0)">
                                  Another action
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn dropdown-toggle"</span> <span class="na">data-bs-toggle=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
    <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/calendar --&gt;</span>
    <span class="c">&lt;!-- SVG icon code --&gt;</span>
  <span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
      Action
    <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
      Another action
    <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn dropdown-toggle"</span> <span class="na">data-bs-toggle=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
    <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/calendar --&gt;</span>
    <span class="c">&lt;!-- SVG icon code --&gt;</span>
    Show calendar
  <span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
      Action
    <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
      Another action
    <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn dropdown-toggle"</span> <span class="na">data-bs-toggle=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
    Show calendar
  <span class="nt">&lt;/button&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
      Action
    <span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
      Another action
    <span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="loading-buttons">Loading buttons</h2>
                      <p>Add the <code class="language-plaintext highlighter-rouge">.btn-loading</code> 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.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn btn-primary btn-loading">
                              Button
                            </a>
                            <a href="javascript:void(0)" class="btn btn-primary btn-loading">
                              Loading button with loooong content
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-loading"</span><span class="nt">&gt;</span>
  Button
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-loading"</span><span class="nt">&gt;</span>
  Loading button with loooong content
<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <a href="javascript:void(0)" class="btn btn-primary">
                            <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                            Button
                          </a>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm me-2"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
  Button
<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="list-of-buttons">List of buttons</h2>
                      <p>Create a list of buttons using the <code class="language-plaintext highlighter-rouge">.btn-list</code> 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.</p>
                      <div class="example no_toc_section">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn btn-success">Save changes</a>
                            <a href="javascript:void(0)" class="btn">Save and continue</a>
                            <a href="javascript:void(0)" class="btn btn-danger">Cancel</a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Save and continue<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <p>If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.</p>
                      <div class="example no_toc_section">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn">One</a>
                            <a href="javascript:void(0)" class="btn">Two</a>
                            <a href="javascript:void(0)" class="btn">Three</a>
                            <a href="javascript:void(0)" class="btn">Four</a>
                            <a href="javascript:void(0)" class="btn">Five</a>
                            <a href="javascript:void(0)" class="btn">Six</a>
                            <a href="javascript:void(0)" class="btn">Seven</a>
                            <a href="javascript:void(0)" class="btn">Eight</a>
                            <a href="javascript:void(0)" class="btn">Nine</a>
                            <a href="javascript:void(0)" class="btn">Ten</a>
                            <a href="javascript:void(0)" class="btn">Eleven</a>
                            <a href="javascript:void(0)" class="btn">Twelve</a>
                            <a href="javascript:void(0)" class="btn">Thirteen</a>
                            <a href="javascript:void(0)" class="btn">Fourteen</a>
                            <a href="javascript:void(0)" class="btn">Fifteen</a>
                            <a href="javascript:void(0)" class="btn">Sixteen</a>
                            <a href="javascript:void(0)" class="btn">Seventeen</a>
                            <a href="javascript:void(0)" class="btn">Eighteen</a>
                            <a href="javascript:void(0)" class="btn">Nineteen</a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>One<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Three<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Four<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Five<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Six<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Seven<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Eight<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Nine<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Ten<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Eleven<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Twelve<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Thirteen<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Fourteen<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Fifteen<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Sixteen<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Seventeen<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Eighteen<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Nineteen<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <p>Use the <code class="language-plaintext highlighter-rouge">.text-center</code> or the <code class="language-plaintext highlighter-rouge">.text-end</code> modifiers to change the buttons’ alignment and place them where they suit best.</p>
                      <div class="example no_toc_section">
                        <div class="example-content">
                          <div class="btn-list justify-content-center">
                            <a href="javascript:void(0)" class="btn">Save and continue</a>
                            <a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list justify-content-center"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Save and continue<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <div class="example no_toc_section">
                        <div class="example-content">
                          <div class="btn-list justify-content-end">
                            <a href="javascript:void(0)" class="btn">Save and continue</a>
                            <a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list justify-content-end"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Save and continue<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <div class="example no_toc_section">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn btn-outline-danger me-auto">Delete</a>
                            <a href="javascript:void(0)" class="btn">Save and continue</a>
                            <a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger me-auto"</span><span class="nt">&gt;</span>Delete<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Save and continue<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="buttons-with-avatars">Buttons with avatars</h2>
                      <p>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.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <div class="btn-list">
                            <a href="javascript:void(0)" class="btn">
                              <span class="avatar" style="background-image: url(../static/avatars/003m.jpg)"></span>
                              Avatar
                            </a>
                            <a href="javascript:void(0)" class="btn">
                              <span class="avatar" style="background-image: url(../static/avatars/000f.jpg)"></span>
                              Avatar
                            </a>
                            <a href="javascript:void(0)" class="btn">
                              <span class="avatar" style="background-image: url(../static/avatars/001f.jpg)"></span>
                              Avatar
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
  Avatar
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
  Avatar
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
  Avatar
<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer class="footer footer-transparent d-print-none">
          <div class="container">
            <div class="row text-center align-items-center flex-row-reverse">
              <div class="col-lg-auto ms-lg-auto">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
                  <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                  <li class="list-inline-item">
                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" 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 13.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>
                      Sponsor
                    </a>
                  </li>
                </ul>
              </div>
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
                    Copyright &copy; 2021
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
  </body>
</html>