badges.mdx 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. ---
  2. title: Badges
  3. description: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
  4. bootstrapLink: components/badge/
  5. ---
  6. ## Default markup
  7. The default badges are square and come in the basic set of colors.
  8. ```html code example vertical centered separated scrollable height="15rem"
  9. <span class="badge bg-blue">Blue</span>
  10. <span class="badge bg-azure">Azure</span>
  11. <span class="badge bg-indigo">Indigo</span>
  12. <span class="badge bg-purple">Purple</span>
  13. <span class="badge bg-pink">Pink</span>
  14. <span class="badge bg-red">Red</span>
  15. <span class="badge bg-orange">Orange</span>
  16. <span class="badge bg-yellow">Yellow</span>
  17. <span class="badge bg-lime">Lime</span>
  18. <span class="badge bg-green">Green</span>
  19. <span class="badge bg-teal">Teal</span>
  20. <span class="badge bg-cyan">Cyan</span>
  21. ```
  22. ## Headings
  23. ```html code example height="240px"
  24. <h1>Example heading <span class="badge bg-secondary">New</span></h1>
  25. <h2>Example heading <span class="badge bg-secondary">New</span></h2>
  26. <h3>Example heading <span class="badge bg-secondary">New</span></h3>
  27. <h4>Example heading <span class="badge bg-secondary">New</span></h4>
  28. <h5>Example heading <span class="badge bg-secondary">New</span></h5>
  29. <h6>Example heading <span class="badge bg-secondary">New</span></h6>
  30. ```
  31. ## Outline badges
  32. ```html code example vertical centered separated scrollable height="15rem"
  33. <span class="badge badge-outline text-blue">blue</span>
  34. <span class="badge badge-outline text-azure">azure</span>
  35. <span class="badge badge-outline text-indigo">indigo</span>
  36. <span class="badge badge-outline text-purple">purple</span>
  37. <span class="badge badge-outline text-pink">pink</span>
  38. <span class="badge badge-outline text-red">red</span>
  39. <span class="badge badge-outline text-orange">orange</span>
  40. <span class="badge badge-outline text-yellow">yellow</span>
  41. <span class="badge badge-outline text-lime">lime</span>
  42. <span class="badge badge-outline text-green">green</span>
  43. <span class="badge badge-outline text-teal">teal</span>
  44. <span class="badge badge-outline text-cyan">cyan</span>
  45. ```
  46. ## Pill badges
  47. Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
  48. ```html code example centered separated height="7rem"
  49. <span class="badge badge-pill bg-blue">1</span>
  50. <span class="badge badge-pill bg-azure">2</span>
  51. <span class="badge badge-pill bg-indigo">3</span>
  52. <span class="badge badge-pill bg-purple">4</span>
  53. <span class="badge badge-pill bg-pink">5</span>
  54. <span class="badge badge-pill bg-red">6</span>
  55. <span class="badge badge-pill bg-orange">7</span>
  56. <span class="badge badge-pill bg-yellow">8</span>
  57. <span class="badge badge-pill bg-lime">9</span>
  58. <span class="badge badge-pill bg-green">10</span>
  59. <span class="badge badge-pill bg-teal">11</span>
  60. <span class="badge badge-pill bg-cyan">12</span>
  61. ```
  62. ## Soft color badges
  63. You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](colors) to see the list of available colors and choose ones that best suit your design.
  64. ```html code example vertical centered separated scrollable height="15rem"
  65. <span class="badge bg-blue-lt">Blue</span>
  66. <span class="badge bg-azure-lt">Azure</span>
  67. <span class="badge bg-indigo-lt">Indigo</span>
  68. <span class="badge bg-purple-lt">Purple</span>
  69. <span class="badge bg-pink-lt">Pink</span>
  70. <span class="badge bg-red-lt">Red</span>
  71. <span class="badge bg-orange-lt">Orange</span>
  72. <span class="badge bg-yellow-lt">Yellow</span>
  73. <span class="badge bg-lime-lt">Lime</span>
  74. <span class="badge bg-green-lt">Green</span>
  75. <span class="badge bg-teal-lt">Teal</span>
  76. <span class="badge bg-cyan-lt">Cyan</span>
  77. ```
  78. ## Links
  79. Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
  80. ```html code example vertical centered separated scrollable height="15rem"
  81. <a href="#" class="badge bg-blue">Blue</a>
  82. <a href="#" class="badge bg-azure">Azure</a>
  83. <a href="#" class="badge bg-indigo">Indigo</a>
  84. <a href="#" class="badge bg-purple">Purple</a>
  85. <a href="#" class="badge bg-pink">Pink</a>
  86. <a href="#" class="badge bg-red">Red</a>
  87. <a href="#" class="badge bg-orange">Orange</a>
  88. <a href="#" class="badge bg-yellow">Yellow</a>
  89. <a href="#" class="badge bg-lime">Lime</a>
  90. <a href="#" class="badge bg-green">Green</a>
  91. <a href="#" class="badge bg-teal">Teal</a>
  92. <a href="#" class="badge bg-cyan">Cyan</a>
  93. ```
  94. ## Button with badge
  95. Badges can be used as part of links or buttons to provide a counter.
  96. ```html example centered separated height="7rem"
  97. <button type="button" class="btn">Notifications <span class="badge bg-red ms-2">4</span></button>
  98. <button type="button" class="btn">Notifications <span class="badge bg-green ms-2">4</span></button>
  99. ```
  100. ```html
  101. <button type="button" class="btn">
  102. Notifications <span class="badge bg-red ms-2">4</span>
  103. </button>
  104. <button type="button" class="btn">
  105. Notifications <span class="badge bg-green ms-2">4</span>
  106. </button>
  107. ```