buttons.mdx 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863
  1. ---
  2. title: Buttons
  3. description: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
  4. bootstrapLink: components/buttons/
  5. ---
  6. ## Button tag
  7. As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.
  8. ```html example code centered separated height="7rem"
  9. <a href="#" class="btn" role="button">Link</a>
  10. <button class="btn">Button</button>
  11. <input type="button" class="btn" value="Input" />
  12. <input type="submit" class="btn" value="Submit" />
  13. <input type="reset" class="btn" value="Reset" />
  14. ```
  15. ## Default button
  16. 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.
  17. ```html example code centered separated height="7rem"
  18. <a href="#" class="btn" role="button">Link</a>
  19. ```
  20. ## Button variations
  21. 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.
  22. ```html code example vertical centered separated scrollable height="15rem"
  23. <a href="#" class="btn btn-primary">Primary</a>
  24. <a href="#" class="btn btn-secondary">Secondary</a>
  25. <a href="#" class="btn btn-success">Success</a>
  26. <a href="#" class="btn btn-warning">Warning</a>
  27. <a href="#" class="btn btn-danger">Danger</a>
  28. <a href="#" class="btn btn-info">Info</a>
  29. <a href="#" class="btn btn-dark">Dark</a>
  30. <a href="#" class="btn btn-light">Light</a>
  31. ```
  32. ## Disabled buttons
  33. 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.
  34. ```html code example vertical centered separated scrollable height="15rem"
  35. <a href="#" class="btn btn-primary disabled">Primary</a>
  36. <a href="#" class="btn btn-secondary disabled">Secondary</a>
  37. <a href="#" class="btn btn-success disabled">Success</a>
  38. <a href="#" class="btn btn-warning disabled">Warning</a>
  39. <a href="#" class="btn btn-danger disabled">Danger</a>
  40. <a href="#" class="btn btn-info disabled">Info</a>
  41. <a href="#" class="btn btn-dark disabled">Dark</a>
  42. <a href="#" class="btn btn-light disabled">Light</a>
  43. ```
  44. ## Color variations
  45. 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.
  46. ```html code example vertical centered separated scrollable height="15rem"
  47. <a href="#" class="btn btn-blue">Blue</a>
  48. <a href="#" class="btn btn-azure">Azure</a>
  49. <a href="#" class="btn btn-indigo">Indigo</a>
  50. <a href="#" class="btn btn-purple">Purple</a>
  51. <a href="#" class="btn btn-pink">Pink</a>
  52. <a href="#" class="btn btn-red">Red</a>
  53. <a href="#" class="btn btn-orange">Orange</a>
  54. <a href="#" class="btn btn-yellow">Yellow</a>
  55. <a href="#" class="btn btn-lime">Lime</a>
  56. <a href="#" class="btn btn-green">Green</a>
  57. <a href="#" class="btn btn-teal">Teal</a>
  58. <a href="#" class="btn btn-cyan">Cyan</a>
  59. ```
  60. ## Ghost buttons
  61. Use the `.btn-ghost-*` 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.
  62. ```html example vertical centered separated scrollable height="15rem"
  63. <a href="#" class="btn btn-ghost-primary">Primary</a>
  64. <a href="#" class="btn btn-ghost-secondary">Secondary</a>
  65. <a href="#" class="btn btn-ghost-success">Success</a>
  66. <a href="#" class="btn btn-ghost-warning">Warning</a>
  67. <a href="#" class="btn btn-ghost-danger">Danger</a>
  68. <a href="#" class="btn btn-ghost-info">Info</a>
  69. <a href="#" class="btn btn-ghost-dark">Dark</a>
  70. <div class="p-2 bg-dark"><a href="#" class="btn btn-ghost-light">Light</a></div>
  71. ```
  72. ```html
  73. <a href="#" class="btn btn-ghost-primary">Primary</a>
  74. <a href="#" class="btn btn-ghost-secondary">Secondary</a>
  75. <a href="#" class="btn btn-ghost-success">Success</a>
  76. <a href="#" class="btn btn-ghost-warning">Warning</a>
  77. <a href="#" class="btn btn-ghost-danger">Danger</a>
  78. <a href="#" class="btn btn-ghost-info">Info</a>
  79. <a href="#" class="btn btn-ghost-dark">Dark</a>
  80. <a href="#" class="btn btn-ghost-light">Light</a>
  81. ```
  82. ## Square buttons
  83. Use the `.btn-square` class to remove the border radius, if you want the corners of your button to be square rather than rounded.
  84. ```html example centered separated height="7rem"
  85. <a href="#" class="btn btn-square">Square button</a>
  86. ```
  87. ```html
  88. <a href="#" class="btn btn-square">
  89. Square button
  90. </a>
  91. ```
  92. ## Pill buttons
  93. Add the `.btn-pill` class to your button to make it rounded and give it a modern and attractive look.
  94. ```html example centered separated height="7rem"
  95. <a href="#" class="btn btn-pill">Pill button</a>
  96. ```
  97. ```html
  98. <a href="#" class="btn btn-pill">
  99. Pill button
  100. </a>
  101. ```
  102. ## Outline buttons
  103. Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
  104. ```html example vertical centered separated scrollable height="15rem"
  105. <a href="#" class="btn btn-outline-primary">Primary</a>
  106. <a href="#" class="btn btn-outline-secondary">Secondary</a>
  107. <a href="#" class="btn btn-outline-success">Success</a>
  108. <a href="#" class="btn btn-outline-warning">Warning</a>
  109. <a href="#" class="btn btn-outline-danger">Danger</a>
  110. <a href="#" class="btn btn-outline-info">Info</a>
  111. <a href="#" class="btn btn-outline-dark">Dark</a>
  112. <a href="#" class="btn btn-outline-light">Light</a>
  113. ```
  114. ```html
  115. <a href="#" class="btn btn-outline-primary">
  116. Primary
  117. </a>
  118. <a href="#" class="btn btn-outline-secondary">
  119. Secondary
  120. </a>
  121. <a href="#" class="btn btn-outline-success">
  122. Success
  123. </a>
  124. <a href="#" class="btn btn-outline-warning">
  125. Warning
  126. </a>
  127. <a href="#" class="btn btn-outline-danger">
  128. Danger
  129. </a>
  130. <a href="#" class="btn btn-outline-info">
  131. Info
  132. </a>
  133. <a href="#" class="btn btn-outline-dark">
  134. Dark
  135. </a>
  136. <a href="#" class="btn btn-outline-light">
  137. Light
  138. </a>
  139. ```
  140. ## Button size
  141. Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
  142. ```html code example centered separated height="8rem"
  143. <button type="button" class="btn btn-primary btn-lg">Large button</button>
  144. <button type="button" class="btn btn-lg">Large button</button>
  145. ```
  146. ```html code example centered separated height="7rem"
  147. <button type="button" class="btn btn-primary btn-sm">Small button</button>
  148. <button type="button" class="btn btn-sm">Small button</button>
  149. ```
  150. ## Buttons with icons
  151. 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.
  152. Icons can be found [**here**](/docs/components/icons)
  153. ```html example centered separated height="7rem"
  154. <button type="button" class="btn"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  155. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  156. <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
  157. <polyline points="7 9 12 4 17 9" />
  158. <line x1="12" y1="4" x2="12" y2="16" />
  159. </svg> Upload</button>
  160. <button type="button" class="btn btn-warning"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  161. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  162. <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
  163. </svg> I like</button>
  164. <button type="button" class="btn btn-success"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  165. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  166. <path d="M5 12l5 5l10 -10" />
  167. </svg> I agree</button>
  168. <button type="button" class="btn btn-primary"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  169. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  170. <line x1="12" y1="5" x2="12" y2="19" />
  171. <line x1="5" y1="12" x2="19" y2="12" />
  172. </svg> More</button>
  173. <button type="button" class="btn btn-danger"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  174. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  175. <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
  176. <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
  177. </svg> Link</button>
  178. <button type="button" class="btn btn-info"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  179. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  180. <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" />
  181. <line x1="12" y1="12" x2="12" y2="12.01" />
  182. <line x1="8" y1="12" x2="8" y2="12.01" />
  183. <line x1="16" y1="12" x2="16" y2="12.01" />
  184. </svg> Comment</button>
  185. ```
  186. ```html
  187. <button type="button" class="btn">
  188. <!-- SVG icon from http://tabler-icons.io -->
  189. <svg>...</svg>
  190. Upload
  191. </button>
  192. <button type="button" class="btn btn-warning">
  193. <!-- SVG icon from http://tabler-icons.io -->
  194. <svg>...</svg>
  195. I like
  196. </button>
  197. <button type="button" class="btn btn-success">
  198. <!-- SVG icon from http://tabler-icons.io -->
  199. <svg>...</svg>
  200. I agree
  201. </button>
  202. <button type="button" class="btn btn-primary">
  203. <!-- SVG icon from http://tabler-icons.io -->
  204. <svg>...</svg>
  205. More
  206. </button>
  207. <button type="button" class="btn btn-danger">
  208. <!-- SVG icon from http://tabler-icons.io -->
  209. <svg>...</svg>
  210. Link
  211. </button>
  212. <button type="button" class="btn btn-info">
  213. <!-- SVG icon from http://tabler-icons.io -->
  214. <svg>...</svg>
  215. Comment
  216. </button>
  217. ```
  218. ## Social buttons
  219. 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.
  220. ```html example vertical centered separated scrollable height="15rem"
  221. <a href="#" class="btn btn-facebook"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  222. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  223. <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
  224. </svg> Facebook</a>
  225. <a href="#" class="btn btn-twitter"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  226. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  227. <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" />
  228. </svg> Twitter</a>
  229. <a href="#" class="btn btn-google"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  230. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  231. <path d="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8" />
  232. </svg> Google</a>
  233. <a href="#" class="btn btn-youtube"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  234. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  235. <rect x="3" y="5" width="18" height="14" rx="4" />
  236. <path d="M10 9l5 3l-5 3z" />
  237. </svg> Youtube</a>
  238. <a href="#" class="btn btn-vimeo"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  239. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  240. <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" />
  241. </svg> Vimeo</a>
  242. <a href="#" class="btn btn-dribbble"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  243. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  244. <circle cx="12" cy="12" r="9" />
  245. <path d="M9 3.6c5 6 7 10.5 7.5 16.2" />
  246. <path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4" />
  247. <path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5" />
  248. </svg> Dribbble</a>
  249. <a href="#" class="btn btn-github"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  250. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  251. <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" />
  252. </svg> Github</a>
  253. <a href="#" class="btn btn-instagram"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  254. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  255. <rect x="4" y="4" width="16" height="16" rx="4" />
  256. <circle cx="12" cy="12" r="3" />
  257. <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
  258. </svg> Instagram</a>
  259. <a href="#" class="btn btn-pinterest"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  260. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  261. <line x1="8" y1="20" x2="12" y2="11" />
  262. <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" />
  263. <circle cx="12" cy="12" r="9" />
  264. </svg> Pinterest</a>
  265. <a href="#" class="btn btn-vk"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  266. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  267. <path d="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" />
  268. </svg> VK</a>
  269. <a href="#" class="btn btn-rss"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  270. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  271. <circle cx="5" cy="19" r="1" />
  272. <path d="M4 4a16 16 0 0 1 16 16" />
  273. <path d="M4 11a9 9 0 0 1 9 9" />
  274. </svg> RSS</a>
  275. <a href="#" class="btn btn-flickr"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  276. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  277. <circle cx="7" cy="12" r="3" />
  278. <circle cx="17" cy="12" r="3" />
  279. </svg> Flickr</a>
  280. <a href="#" class="btn btn-bitbucket"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  281. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  282. <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" />
  283. <path d="M14 15h-4l-1 -6h6z" />
  284. </svg> Bitbucket</a>
  285. <a href="#" class="btn btn-tabler"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  286. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  287. <path d="M8 9l3 3l-3 3" />
  288. <line x1="13" y1="15" x2="16" y2="15" />
  289. <rect x="4" y="4" width="16" height="16" rx="4" />
  290. </svg> Tabler</a>
  291. ```
  292. ```html
  293. <a href="#" class="btn btn-facebook">
  294. <!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
  295. <svg>...</svg>
  296. Facebook
  297. </a>
  298. <a href="#" class="btn btn-twitter">
  299. <!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
  300. <svg>...</svg>
  301. Twitter
  302. </a>
  303. <a href="#" class="btn btn-google">
  304. <!-- SVG icon from http://tabler-icons.io -->
  305. <svg>...</svg>
  306. Google
  307. </a>
  308. <a href="#" class="btn btn-youtube">
  309. <!-- SVG icon from http://tabler-icons.io -->
  310. <svg>...</svg>
  311. Youtube
  312. </a>
  313. <a href="#" class="btn btn-vimeo">
  314. <!-- SVG icon from http://tabler-icons.io -->
  315. <svg>...</svg>
  316. Vimeo
  317. </a>
  318. <a href="#" class="btn btn-dribbble">
  319. <!-- SVG icon from http://tabler-icons.io -->
  320. <svg>...</svg>
  321. Dribbble
  322. </a>
  323. <a href="#" class="btn btn-github">
  324. <!-- SVG icon from http://tabler-icons.io -->
  325. <svg>...</svg>
  326. Github
  327. </a>
  328. <a href="#" class="btn btn-instagram">
  329. <!-- SVG icon from http://tabler-icons.io -->
  330. <svg>...</svg>
  331. Instagram
  332. </a>
  333. <a href="#" class="btn btn-pinterest">
  334. <!-- SVG icon from http://tabler-icons.io -->
  335. <svg>...</svg>
  336. Pinterest
  337. </a>
  338. <a href="#" class="btn btn-vk">
  339. <!-- SVG icon from http://tabler-icons.io -->
  340. <svg>...</svg>
  341. VK
  342. </a>
  343. <a href="#" class="btn btn-rss">
  344. <!-- SVG icon from http://tabler-icons.io -->
  345. <svg>...</svg>
  346. RSS
  347. </a>
  348. <a href="#" class="btn btn-flickr">
  349. <!-- SVG icon from http://tabler-icons.io -->
  350. <svg>...</svg>
  351. Flickr
  352. </a>
  353. <a href="#" class="btn btn-bitbucket">
  354. <!-- SVG icon from http://tabler-icons.io -->
  355. <svg>...</svg>
  356. Bitbucket
  357. </a>
  358. <a href="#" class="btn btn-tabler">
  359. <!-- SVG icon from http://tabler-icons.io -->
  360. <svg>...</svg>
  361. Tabler
  362. </a>
  363. ```
  364. 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.
  365. ```html example separated scrollable height="7rem"
  366. <a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
  367. <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">
  368. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  369. <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
  370. </svg>
  371. </a>
  372. <a href="#" class="btn btn-twitter btn-icon" aria-label="Button">
  373. <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">
  374. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  375. <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" />
  376. </svg>
  377. </a>
  378. <a href="#" class="btn btn-google btn-icon" aria-label="Button">
  379. <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">
  380. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  381. <path d="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8" />
  382. </svg>
  383. </a>
  384. <a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
  385. <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">
  386. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  387. <rect x="3" y="5" width="18" height="14" rx="4" />
  388. <path d="M10 9l5 3l-5 3z" />
  389. </svg>
  390. </a>
  391. <a href="#" class="btn btn-vimeo btn-icon" aria-label="Button">
  392. <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">
  393. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  394. <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" />
  395. </svg>
  396. </a>
  397. <a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
  398. <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">
  399. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  400. <circle cx="12" cy="12" r="9" />
  401. <path d="M9 3.6c5 6 7 10.5 7.5 16.2" />
  402. <path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4" />
  403. <path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5" />
  404. </svg>
  405. </a>
  406. <a href="#" class="btn btn-github btn-icon" aria-label="Button">
  407. <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">
  408. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  409. <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" />
  410. </svg>
  411. </a>
  412. <a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
  413. <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">
  414. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  415. <rect x="4" y="4" width="16" height="16" rx="4" />
  416. <circle cx="12" cy="12" r="3" />
  417. <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
  418. </svg>
  419. </a>
  420. <a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
  421. <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">
  422. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  423. <line x1="8" y1="20" x2="12" y2="11" />
  424. <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" />
  425. <circle cx="12" cy="12" r="9" />
  426. </svg>
  427. </a>
  428. <a href="#" class="btn btn-vk btn-icon" aria-label="Button">
  429. <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">
  430. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  431. <path d="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" />
  432. </svg>
  433. </a>
  434. <a href="#" class="btn btn-rss btn-icon" aria-label="Button">
  435. <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">
  436. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  437. <circle cx="5" cy="19" r="1" />
  438. <path d="M4 4a16 16 0 0 1 16 16" />
  439. <path d="M4 11a9 9 0 0 1 9 9" />
  440. </svg>
  441. </a>
  442. <a href="#" class="btn btn-flickr btn-icon" aria-label="Button">
  443. <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">
  444. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  445. <circle cx="7" cy="12" r="3" />
  446. <circle cx="17" cy="12" r="3" />
  447. </svg>
  448. </a>
  449. <a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
  450. <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">
  451. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  452. <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" />
  453. <path d="M14 15h-4l-1 -6h6z" />
  454. </svg>
  455. </a>
  456. <a href="#" class="btn btn-tabler btn-icon" aria-label="Button">
  457. <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">
  458. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  459. <path d="M8 9l3 3l-3 3" />
  460. <line x1="13" y1="15" x2="16" y2="15" />
  461. <rect x="4" y="4" width="16" height="16" rx="4" />
  462. </svg>
  463. </a>
  464. ```
  465. ```html
  466. <a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
  467. <!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
  468. <svg>...</svg>
  469. </a>
  470. <a href="#" class="btn btn-twitter btn-icon" aria-label="Button">
  471. <!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
  472. <svg>...</svg>
  473. </a>
  474. <a href="#" class="btn btn-google btn-icon" aria-label="Button">
  475. <!-- SVG icon from http://tabler-icons.io/i/brand-google -->
  476. <svg>...</svg>
  477. </a>
  478. <a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
  479. <!-- SVG icon from http://tabler-icons.io/i/brand-youtube -->
  480. <svg>...</svg>
  481. </a>
  482. <a href="#" class="btn btn-vimeo btn-icon" aria-label="Button">
  483. <!-- SVG icon from http://tabler-icons.io/i/brand-vimeo -->
  484. <svg>...</svg>
  485. </a>
  486. <a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
  487. <!-- SVG icon from http://tabler-icons.io/i/brand-dribbble -->
  488. <svg>...</svg>
  489. </a>
  490. <a href="#" class="btn btn-github btn-icon" aria-label="Button">
  491. <!-- SVG icon from http://tabler-icons.io/i/brand-github -->
  492. <svg>...</svg>
  493. </a>
  494. <a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
  495. <!-- SVG icon from http://tabler-icons.io/i/brand-instagram -->
  496. <svg>...</svg>
  497. </a>
  498. <a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
  499. <!-- SVG icon from http://tabler-icons.io/i/brand-pinterest -->
  500. <svg>...</svg>
  501. </a>
  502. <a href="#" class="btn btn-vk btn-icon" aria-label="Button">
  503. <!-- SVG icon from http://tabler-icons.io/i/brand-vk -->
  504. <svg>...</svg>
  505. </a>
  506. <a href="#" class="btn btn-rss btn-icon" aria-label="Button">
  507. <!-- SVG icon from http://tabler-icons.io/i/rss -->
  508. <svg>...</svg>
  509. </a>
  510. <a href="#" class="btn btn-flickr btn-icon" aria-label="Button">
  511. <!-- SVG icon from http://tabler-icons.io/i/brand-flickr -->
  512. <svg>...</svg>
  513. </a>
  514. <a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
  515. <!-- SVG icon from http://tabler-icons.io/i/brand-bitbucket -->
  516. <svg>...</svg>
  517. </a>
  518. <a href="#" class="btn btn-tabler btn-icon" aria-label="Button">
  519. <!-- SVG icon from http://tabler-icons.io/i/brand-tabler -->
  520. <svg>...</svg>
  521. </a>
  522. ```
  523. ## Icon buttons
  524. Add the `.btn-icon` 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.
  525. ```html example centered separated height="7rem"
  526. <a href="#" class="btn btn-primary btn-icon" aria-label="Button">
  527. <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">
  528. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  529. <path d="M3 12h4l3 8l4 -16l3 8h4" />
  530. </svg>
  531. </a>
  532. <a href="#" class="btn btn-github btn-icon" aria-label="Button">
  533. <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">
  534. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  535. <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" />
  536. </svg>
  537. </a>
  538. <a href="#" class="btn btn-success btn-icon" aria-label="Button">
  539. <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">
  540. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  541. <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" />
  542. <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
  543. </svg>
  544. </a>
  545. <a href="#" class="btn btn-warning btn-icon" aria-label="Button">
  546. <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">
  547. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  548. <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" />
  549. </svg>
  550. </a>
  551. <a href="#" class="btn btn-danger btn-icon" aria-label="Button">
  552. <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">
  553. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  554. <line x1="4" y1="7" x2="20" y2="7" />
  555. <line x1="10" y1="11" x2="10" y2="17" />
  556. <line x1="14" y1="11" x2="14" y2="17" />
  557. <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
  558. <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
  559. </svg>
  560. </a>
  561. <a href="#" class="btn btn-purple btn-icon" aria-label="Button">
  562. <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">
  563. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  564. <rect x="3" y="12" width="6" height="8" rx="1" />
  565. <rect x="9" y="8" width="6" height="12" rx="1" />
  566. <rect x="15" y="4" width="6" height="16" rx="1" />
  567. <line x1="4" y1="20" x2="18" y2="20" />
  568. </svg>
  569. </a>
  570. <a href="#" class="btn btn-icon" aria-label="Button">
  571. <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">
  572. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  573. <circle cx="7" cy="18" r="2" />
  574. <circle cx="7" cy="6" r="2" />
  575. <circle cx="17" cy="12" r="2" />
  576. <line x1="7" y1="8" x2="7" y2="16" />
  577. <path d="M7 8a4 4 0 0 0 4 4h4" />
  578. </svg>
  579. </a>
  580. ```
  581. ```html
  582. <a href="#" class="btn btn-primary btn-icon" aria-label="Button">
  583. <!-- SVG icon from http://tabler-icons.io/i/activity -->
  584. <svg>...</svg>
  585. </a>
  586. <a href="#" class="btn btn-github btn-icon" aria-label="Button">
  587. <!-- SVG icon from http://tabler-icons.io/i/brand-github -->
  588. <svg>...</svg>
  589. </a>
  590. <a href="#" class="btn btn-success btn-icon" aria-label="Button">
  591. <!-- SVG icon from http://tabler-icons.io/i/bell -->
  592. <svg>...</svg>
  593. </a>
  594. <a href="#" class="btn btn-warning btn-icon" aria-label="Button">
  595. <!-- SVG icon from http://tabler-icons.io/i/star -->
  596. <svg>...</svg>
  597. </a>
  598. <a href="#" class="btn btn-danger btn-icon" aria-label="Button">
  599. <!-- SVG icon from http://tabler-icons.io/i/trash -->
  600. <svg>...</svg>
  601. </a>
  602. <a href="#" class="btn btn-purple btn-icon" aria-label="Button">
  603. <!-- SVG icon from http://tabler-icons.io/i/chart-bar -->
  604. <svg>...</svg>
  605. </a>
  606. <a href="#" class="btn btn-icon" aria-label="Button">
  607. <!-- SVG icon from http://tabler-icons.io/i/git-merge -->
  608. <svg>...</svg>
  609. </a>
  610. ```
  611. ## Dropdown buttons
  612. 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.
  613. ```html example centered separated height="7rem"
  614. <div class="dropdown">
  615. <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  616. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  617. <rect x="4" y="5" width="16" height="16" rx="2" />
  618. <line x1="16" y1="3" x2="16" y2="7" />
  619. <line x1="8" y1="3" x2="8" y2="7" />
  620. <line x1="4" y1="11" x2="20" y2="11" />
  621. <line x1="11" y1="15" x2="12" y2="15" />
  622. <line x1="12" y1="15" x2="12" y2="18" />
  623. </svg></button>
  624. <div class="dropdown-menu">
  625. <a class="dropdown-item" href="#">Action</a>
  626. <a class="dropdown-item" href="#">Another action</a>
  627. </div>
  628. </div>
  629. <div class="dropdown">
  630. <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  631. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  632. <rect x="4" y="5" width="16" height="16" rx="2" />
  633. <line x1="16" y1="3" x2="16" y2="7" />
  634. <line x1="8" y1="3" x2="8" y2="7" />
  635. <line x1="4" y1="11" x2="20" y2="11" />
  636. <line x1="11" y1="15" x2="12" y2="15" />
  637. <line x1="12" y1="15" x2="12" y2="18" />
  638. </svg> Show calendar</button>
  639. <div class="dropdown-menu">
  640. <a class="dropdown-item" href="#">Action</a>
  641. <a class="dropdown-item" href="#">Another action</a>
  642. </div>
  643. </div>
  644. <div class="dropdown">
  645. <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">Show calendar</button>
  646. <div class="dropdown-menu">
  647. <a class="dropdown-item" href="#">Action</a>
  648. <a class="dropdown-item" href="#">Another action</a>
  649. </div>
  650. </div>
  651. ```
  652. ```html
  653. <div class="dropdown">
  654. <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
  655. <!-- SVG icon from http://tabler-icons.io/i/calendar -->
  656. <svg>...</svg>
  657. </button>
  658. <div class="dropdown-menu">
  659. <a class="dropdown-item" href="#">
  660. Action
  661. </a>
  662. <a class="dropdown-item" href="#">
  663. Another action
  664. </a>
  665. </div>
  666. </div>
  667. <div class="dropdown">
  668. <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
  669. <!-- SVG icon from http://tabler-icons.io/i/calendar -->
  670. <svg>...</svg>
  671. Show calendar
  672. </button>
  673. <div class="dropdown-menu">
  674. <a class="dropdown-item" href="#">
  675. Action
  676. </a>
  677. <a class="dropdown-item" href="#">
  678. Another action
  679. </a>
  680. </div>
  681. </div>
  682. <div class="dropdown">
  683. <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
  684. Show calendar
  685. </button>
  686. <div class="dropdown-menu">
  687. <a class="dropdown-item" href="#">
  688. Action
  689. </a>
  690. <a class="dropdown-item" href="#">
  691. Another action
  692. </a>
  693. </div>
  694. </div>
  695. ```
  696. ## Loading buttons
  697. Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.
  698. ```html example centered separated height="7rem"
  699. <a href="#" class="btn btn-primary btn-loading">Button</a>
  700. <a href="#" class="btn btn-primary btn-loading">Loading button with loooong content</a>
  701. ```
  702. ```html
  703. <a href="#" class="btn btn-primary btn-loading">
  704. Button
  705. </a>
  706. <a href="#" class="btn btn-primary btn-loading">
  707. Loading button with loooong content
  708. </a>
  709. ```
  710. ```html example centered height="7rem"
  711. <a href="#" class="btn btn-primary"><span class="spinner-border spinner-border-sm me-2" role="status"></span> Button</a>
  712. ```
  713. ```html
  714. <a href="#" class="btn btn-primary">
  715. <span class="spinner-border spinner-border-sm me-2" role="status"></span>
  716. Button
  717. </a>
  718. ```
  719. ## List of buttons
  720. Create a list of buttons using the `.btn-list` container to display different actions a user can take. If you add aditional styling, such as colours, you will be able to focus users' attention on a particular action or suggest the result.
  721. ```html code example vertical centered columns={3} height="7rem"
  722. <div class="btn-list">
  723. <a href="#" class="btn btn-success">Save changes</a>
  724. <a href="#" class="btn">Save and continue</a>
  725. <a href="#" class="btn btn-danger">Cancel</a>
  726. </div>
  727. ```
  728. If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.
  729. ```html code example centered
  730. <div class="btn-list">
  731. <a href="#" class="btn">One</a>
  732. <a href="#" class="btn">Two</a>
  733. <a href="#" class="btn">Three</a>
  734. <a href="#" class="btn">Four</a>
  735. <a href="#" class="btn">Five</a>
  736. <a href="#" class="btn">Six</a>
  737. <a href="#" class="btn">Seven</a>
  738. <a href="#" class="btn">Eight</a>
  739. <a href="#" class="btn">Nine</a>
  740. <a href="#" class="btn">Ten</a>
  741. <a href="#" class="btn">Eleven</a>
  742. <a href="#" class="btn">Twelve</a>
  743. <a href="#" class="btn">Thirteen</a>
  744. <a href="#" class="btn">Fourteen</a>
  745. <a href="#" class="btn">Fifteen</a>
  746. <a href="#" class="btn">Sixteen</a>
  747. <a href="#" class="btn">Seventeen</a>
  748. <a href="#" class="btn">Eighteen</a>
  749. <a href="#" class="btn">Nineteen</a>
  750. </div>
  751. ```
  752. Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.
  753. ```html code example vertical centered columns={3} height="7rem"
  754. <div class="btn-list justify-content-center">
  755. <a href="#" class="btn">Save and continue</a>
  756. <a href="#" class="btn btn-primary">Save changes</a>
  757. </div>
  758. ```
  759. ```html code example vertical centered columns={3} height="7rem"
  760. <div class="btn-list justify-content-end">
  761. <a href="#" class="btn">Save and continue</a>
  762. <a href="#" class="btn btn-primary">Save changes</a>
  763. </div>
  764. ```
  765. ```html code example vertical centered columns={3} height="7rem"
  766. <div class="btn-list">
  767. <a href="#" class="btn btn-outline-danger me-auto">Delete</a>
  768. <a href="#" class="btn">Save and continue</a>
  769. <a href="#" class="btn btn-primary">Save changes</a>
  770. </div>
  771. ```
  772. ## Buttons with avatars
  773. 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.
  774. ```html example centered separated height="7rem"
  775. <a href="#" class="btn"><span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1542534759-05f6c34a9e63?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar</a>
  776. <a href="#" class="btn"><span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1546539782-6fc531453083?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar</a>
  777. <a href="#" class="btn"><span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1541585452861-0375331f10bf?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar</a>
  778. ```
  779. ```html
  780. <a href="#" class="btn">
  781. <span class="avatar" style="background-image: url(...)"></span> Avatar
  782. </a>
  783. <a href="#" class="btn">
  784. <span class="avatar" style="background-image: url(...)"></span> Avatar
  785. </a>
  786. <a href="#" class="btn">
  787. <span class="avatar" style="background-image: url(...)"></span> Avatar
  788. </a>
  789. ```