Lumo Badges

Indicate status or other types of supplementary information using badges.

To use the badge utility, you first need to import the style sheet into the correct style scope where you want to use it.

In server-side views (Java), import the JavaScript module using the @JsModule annotation and then import the style sheet it defines by using the @CssImport annotation.

Java

  1. @JsModule("@vaadin/vaadin-lumo-styles/badge.js")
  2. // Here, we add the style sheet to the global scope
  3. @CssImport(include = "lumo-badge")

In client-side views (JavaScript), import the JavaScript module and then include the style sheet it defines by using the <custom-style> element from the Polymer library.

JavaScript

  1. import '@vaadin/vaadin-lumo-styles/badge.js';
  2. import '@polymer/polymer/lib/elements/custom-style.js';
  4. const style = document.createElement('custom-style');
  5. style.innerHTML = `<style include="lumo-badge"></style>`;
  6. // Add the style element to the correct style scope.
  7. // Here we add it to the global scope.
  8. document.head.appendChild(style);

See Importing Style Sheets for more information.

Once you’ve imported the style sheet, you can use the custom theme variant on any plain HTML element, for example a <span>.

See Theme Variants for information how apply custom theme variants using Java, JavaScript, and HTML.

Colors

HTML

  1. <span theme="badge">Normal</span>
  2. <span theme="badge success">Success</span>
  3. <span theme="badge error">Error</span>
  4. <span theme="badge contrast">Contrast</span>
  6. <span theme="badge">1</span>
  7. <span theme="badge success">2</span>
  8. <span theme="badge error">12</span>
  9. <span theme="badge contrast">99+</span>

Primary

HTML

  1. <span theme="badge primary">Normal</span>
  2. <span theme="badge success primary">Success</span>
  3. <span theme="badge error primary">Error</span>
  4. <span theme="badge contrast primary">Contrast</span>
  6. <span theme="badge primary">1</span>
  7. <span theme="badge success primary">2</span>
  8. <span theme="badge error primary">12</span>
  9. <span theme="badge contrast primary">99+</span>

Small

HTML

  1. <span theme="badge small">Normal</span>
  2. <span theme="badge success small">Success</span>
  3. <span theme="badge error small">Error</span>
  4. <span theme="badge contrast small">Contrast</span>
  6. <span theme="badge small">1</span>
  7. <span theme="badge success small">2</span>
  8. <span theme="badge error small">12</span>
  9. <span theme="badge contrast small">99+</span>
  11. <br>
  13. <span theme="badge small primary">Normal</span>
  14. <span theme="badge success small primary">Success</span>
  15. <span theme="badge error small primary">Error</span>
  16. <span theme="badge contrast small primary">Contrast</span>
  18. <span theme="badge small primary">1</span>
  19. <span theme="badge success small primary">2</span>
  20. <span theme="badge error small primary">12</span>
  21. <span theme="badge contrast small primary">99+</span>

Pill

HTML

  1. <span theme="badge pill">Normal</span>
  2. <span theme="badge success pill">Success</span>
  3. <span theme="badge error pill">Error</span>
  4. <span theme="badge contrast pill">Contrast</span>
  6. <span theme="badge pill">1</span>
  7. <span theme="badge success pill">2</span>
  8. <span theme="badge error pill">12</span>
  9. <span theme="badge contrast pill">99+</span>
  11. <br>
  13. <span theme="badge primary pill">Normal</span>
  14. <span theme="badge success primary pill">Success</span>
  15. <span theme="badge error primary pill">Error</span>
  16. <span theme="badge contrast primary pill">Contrast</span>
  18. <span theme="badge primary pill">1</span>
  19. <span theme="badge success primary pill">2</span>
  20. <span theme="badge error primary pill">12</span>
  21. <span theme="badge contrast primary pill">99+</span>
  23. <h6>Small</h6>
  25. <span theme="badge small pill">Normal</span>
  26. <span theme="badge success small pill">Success</span>
  27. <span theme="badge error small pill">Error</span>
  28. <span theme="badge contrast small pill">Contrast</span>
  30. <span theme="badge small pill">1</span>
  31. <span theme="badge success small pill">2</span>
  32. <span theme="badge error small pill">12</span>
  33. <span theme="badge contrast small pill">99+</span>
  35. <br>
  37. <span theme="badge small primary pill">Normal</span>
  38. <span theme="badge success small primary pill">Success</span>
  39. <span theme="badge error small primary pill">Error</span>
  40. <span theme="badge contrast small primary pill">Contrast</span>
  42. <span theme="badge small primary pill">1</span>
  43. <span theme="badge success small primary pill">2</span>
  44. <span theme="badge error small primary pill">12</span>
  45. <span theme="badge contrast small primary pill">99+</span>

Icon

HTML

  1. <h5>Icon and text</h5>
  3. <span theme="badge">
  4.   <iron-icon icon="lumo:checkmark"></iron-icon>
  5.   <span>Normal</span>
  6. </span>
  7. <span theme="badge success">
  8.   <iron-icon icon="lumo:checkmark"></iron-icon>
  9.   <span>Success</span>
  10. </span>
  11. <span theme="badge error">
  12.   <iron-icon icon="lumo:checkmark"></iron-icon>
  13.   <span>Error</span>
  14. </span>
  15. <span theme="badge contrast">
  16.   <iron-icon icon="lumo:checkmark"></iron-icon>
  17.   <span>Contrast</span>
  18. </span>
  19. <br>
  20. <span theme="badge primary">
  21.   <iron-icon icon="lumo:checkmark"></iron-icon>
  22.   <span>Normal</span>
  23. </span>
  24. <span theme="badge success primary">
  25.   <iron-icon icon="lumo:checkmark"></iron-icon>
  26.   <span>Success</span>
  27. </span>
  28. <span theme="badge error primary">
  29.   <iron-icon icon="lumo:checkmark"></iron-icon>
  30.   <span>Error</span>
  31. </span>
  32. <span theme="badge contrast primary">
  33.   <iron-icon icon="lumo:checkmark"></iron-icon>
  34.   <span>Contrast</span>
  35. </span>
  37. <br>
  39. <span theme="badge pill">
  40.   <iron-icon icon="lumo:checkmark"></iron-icon>
  41.   <span>Normal</span>
  42. </span>
  43. <span theme="badge success pill">
  44.   <iron-icon icon="lumo:checkmark"></iron-icon>
  45.   <span>Success</span>
  46. </span>
  47. <span theme="badge error pill">
  48.   <iron-icon icon="lumo:checkmark"></iron-icon>
  49.   <span>Error</span>
  50. </span>
  51. <span theme="badge contrast pill">
  52.   <iron-icon icon="lumo:checkmark"></iron-icon>
  53.   <span>Contrast</span>
  54. </span>
  55. <br>
  56. <span theme="badge primary pill">
  57.   <iron-icon icon="lumo:checkmark"></iron-icon>
  58.   <span>Normal</span>
  59. </span>
  60. <span theme="badge success primary pill">
  61.   <iron-icon icon="lumo:checkmark"></iron-icon>
  62.   <span>Success</span>
  63. </span>
  64. <span theme="badge error primary pill">
  65.   <iron-icon icon="lumo:checkmark"></iron-icon>
  66.   <span>Error</span>
  67. </span>
  68. <span theme="badge contrast primary pill">
  69.   <iron-icon icon="lumo:checkmark"></iron-icon>
  70.   <span>Contrast</span>
  71. </span>
  73. <h6>Small</h6>
  75. <span theme="badge small">
  76.   <iron-icon icon="lumo:checkmark"></iron-icon>
  77.   <span>Normal</span>
  78. </span>
  79. <span theme="badge success small">
  80.   <iron-icon icon="lumo:checkmark"></iron-icon>
  81.   <span>Success</span>
  82. </span>
  83. <span theme="badge error small">
  84.   <iron-icon icon="lumo:checkmark"></iron-icon>
  85.   <span>Error</span>
  86. </span>
  87. <span theme="badge contrast small">
  88.   <iron-icon icon="lumo:checkmark"></iron-icon>
  89.   <span>Contrast</span>
  90. </span>
  91. <br>
  92. <span theme="badge primary small">
  93.   <iron-icon icon="lumo:checkmark"></iron-icon>
  94.   <span>Normal</span>
  95. </span>
  96. <span theme="badge success primary small">
  97.   <iron-icon icon="lumo:checkmark"></iron-icon>
  98.   <span>Success</span>
  99. </span>
  100. <span theme="badge error primary small">
  101.   <iron-icon icon="lumo:checkmark"></iron-icon>
  102.   <span>Error</span>
  103. </span>
  104. <span theme="badge contrast primary small">
  105.   <iron-icon icon="lumo:checkmark"></iron-icon>
  106.   <span>Contrast</span>
  107. </span>
  109. <br>
  111. <span theme="badge pill small">
  112.   <iron-icon icon="lumo:checkmark"></iron-icon>
  113.   <span>Normal</span>
  114. </span>
  115. <span theme="badge success pill small">
  116.   <iron-icon icon="lumo:checkmark"></iron-icon>
  117.   <span>Success</span>
  118. </span>
  119. <span theme="badge error pill small">
  120.   <iron-icon icon="lumo:checkmark"></iron-icon>
  121.   <span>Error</span>
  122. </span>
  123. <span theme="badge contrast pill small">
  124.   <iron-icon icon="lumo:checkmark"></iron-icon>
  125.   <span>Contrast</span>
  126. </span>
  127. <br>
  128. <span theme="badge primary pill small">
  129.   <iron-icon icon="lumo:checkmark"></iron-icon>
  130.   <span>Normal</span>
  131. </span>
  132. <span theme="badge success primary pill small">
  133.   <iron-icon icon="lumo:checkmark"></iron-icon>
  134.   <span>Success</span>
  135. </span>
  136. <span theme="badge error primary pill small">
  137.   <iron-icon icon="lumo:checkmark"></iron-icon>
  138.   <span>Error</span>
  139. </span>
  140. <span theme="badge contrast primary pill small">
  141.   <iron-icon icon="lumo:checkmark"></iron-icon>
  142.   <span>Contrast</span>
  143. </span>
  145. <h5>Icon only</h5>
  147. <iron-icon icon="lumo:checkmark" theme="badge"></iron-icon>
  148. <iron-icon icon="lumo:checkmark" theme="badge success"></iron-icon>
  149. <iron-icon icon="lumo:checkmark" theme="badge error"></iron-icon>
  150. <iron-icon icon="lumo:checkmark" theme="badge contrast"></iron-icon>
  151. <iron-icon icon="lumo:checkmark" theme="badge primary"></iron-icon>
  152. <iron-icon icon="lumo:checkmark" theme="badge success primary"></iron-icon>
  153. <iron-icon icon="lumo:checkmark" theme="badge error primary"></iron-icon>
  154. <iron-icon icon="lumo:checkmark" theme="badge contrast primary"></iron-icon>
  155. <br>
  156. <iron-icon icon="lumo:checkmark" theme="badge pill"></iron-icon>
  157. <iron-icon icon="lumo:checkmark" theme="badge success pill"></iron-icon>
  158. <iron-icon icon="lumo:checkmark" theme="badge error pill"></iron-icon>
  159. <iron-icon icon="lumo:checkmark" theme="badge contrast pill"></iron-icon>
  160. <iron-icon icon="lumo:checkmark" theme="badge primary pill"></iron-icon>
  161. <iron-icon icon="lumo:checkmark" theme="badge success primary pill"></iron-icon>
  162. <iron-icon icon="lumo:checkmark" theme="badge error primary pill"></iron-icon>
  163. <iron-icon icon="lumo:checkmark" theme="badge contrast primary pill"></iron-icon>
  165. <h6>Small</h6>
  167. <iron-icon icon="lumo:checkmark" theme="badge small"></iron-icon>
  168. <iron-icon icon="lumo:checkmark" theme="badge success small"></iron-icon>
  169. <iron-icon icon="lumo:checkmark" theme="badge error small"></iron-icon>
  170. <iron-icon icon="lumo:checkmark" theme="badge contrast small"></iron-icon>
  171. <iron-icon icon="lumo:checkmark" theme="badge primary small"></iron-icon>
  172. <iron-icon icon="lumo:checkmark" theme="badge success primary small"></iron-icon>
  173. <iron-icon icon="lumo:checkmark" theme="badge error primary small"></iron-icon>
  174. <iron-icon icon="lumo:checkmark" theme="badge contrast primary small"></iron-icon>
  175. <br>
  176. <iron-icon icon="lumo:checkmark" theme="badge pill small"></iron-icon>
  177. <iron-icon icon="lumo:checkmark" theme="badge success pill small"></iron-icon>
  178. <iron-icon icon="lumo:checkmark" theme="badge error pill small"></iron-icon>
  179. <iron-icon icon="lumo:checkmark" theme="badge contrast pill small"></iron-icon>
  180. <iron-icon icon="lumo:checkmark" theme="badge primary pill small"></iron-icon>
  181. <iron-icon icon="lumo:checkmark" theme="badge success primary pill small"></iron-icon>
  182. <iron-icon icon="lumo:checkmark" theme="badge error primary pill small"></iron-icon>
  183. <iron-icon icon="lumo:checkmark" theme="badge contrast primary pill small"></iron-icon>

Empty

HTML

  1. <span theme="badge"></span>
  2. <span theme="badge success"></span>
  3. <span theme="badge error"></span>
  4. <span theme="badge contrast"></span>
  5. <br>
  6. <span theme="badge small"></span>
  7. <span theme="badge success small"></span>
  8. <span theme="badge error small"></span>
  9. <span theme="badge contrast small"></span>

HTML

  1. Visit the <a href="https://vaadin.com" theme="badge">Vaadin</a> website!