statuses.mdx 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. ---
  2. title: Statuses
  3. description: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
  4. ---
  5. ## Default markup
  6. ```html example vertical height="7rem"
  7. <span class="status status-blue">Blue</span>
  8. <span class="status status-azure">Azure</span>
  9. <span class="status status-indigo">Indigo</span>
  10. <span class="status status-purple">Purple</span>
  11. <span class="status status-pink">Pink</span>
  12. <span class="status status-red">Red</span>
  13. <span class="status status-orange">Orange</span>
  14. <span class="status status-yellow">Yellow</span>
  15. <span class="status status-lime">Lime</span>
  16. <span class="status status-green">Green</span>
  17. <span class="status status-teal">Teal</span>
  18. <span class="status status-cyan">Cyan</span>
  19. ```
  20. ```html
  21. <span class="status status-blue">Blue</span>
  22. <span class="status status-azure">Azure</span>
  23. ...
  24. ```
  25. ## Status with dot
  26. ```html example code vertical height="7rem"
  27. <span class="status status-blue">
  28. <span class="status-dot"></span>
  29. Blue
  30. </span>
  31. <span class="status status-azure">
  32. <span class="status-dot"></span>
  33. Azure
  34. </span>
  35. <span class="status status-indigo">
  36. <span class="status-dot"></span>
  37. Indigo
  38. </span>
  39. <span class="status status-purple">
  40. <span class="status-dot"></span>
  41. Purple
  42. </span>
  43. <span class="status status-pink">
  44. <span class="status-dot"></span>
  45. Pink
  46. </span>
  47. <span class="status status-red">
  48. <span class="status-dot"></span>
  49. Red
  50. </span>
  51. <span class="status status-orange">
  52. <span class="status-dot"></span>
  53. Orange
  54. </span>
  55. <span class="status status-yellow">
  56. <span class="status-dot"></span>
  57. Yellow
  58. </span>
  59. <span class="status status-lime">
  60. <span class="status-dot"></span>
  61. Lime
  62. </span>
  63. <span class="status status-green">
  64. <span class="status-dot"></span>
  65. Green
  66. </span>
  67. <span class="status status-teal">
  68. <span class="status-dot"></span>
  69. Teal
  70. </span>
  71. <span class="status status-cyan">
  72. <span class="status-dot"></span>
  73. Cyan
  74. </span>
  75. ```
  76. ### Animated dot
  77. ```html example code vertical height="7rem"
  78. <span class="status status-blue">
  79. <span class="status-dot status-dot-animated"></span>
  80. Blue
  81. </span>
  82. <span class="status status-azure">
  83. <span class="status-dot status-dot-animated"></span>
  84. Azure
  85. </span>
  86. <span class="status status-indigo">
  87. <span class="status-dot status-dot-animated"></span>
  88. Indigo
  89. </span>
  90. <span class="status status-purple">
  91. <span class="status-dot status-dot-animated"></span>
  92. Purple
  93. </span>
  94. <span class="status status-pink">
  95. <span class="status-dot status-dot-animated"></span>
  96. Pink
  97. </span>
  98. <span class="status status-red">
  99. <span class="status-dot status-dot-animated"></span>
  100. Red
  101. </span>
  102. <span class="status status-orange">
  103. <span class="status-dot status-dot-animated"></span>
  104. Orange
  105. </span>
  106. <span class="status status-yellow">
  107. <span class="status-dot status-dot-animated"></span>
  108. Yellow
  109. </span>
  110. <span class="status status-lime">
  111. <span class="status-dot status-dot-animated"></span>
  112. Lime
  113. </span>
  114. <span class="status status-green">
  115. <span class="status-dot status-dot-animated"></span>
  116. Green
  117. </span>
  118. <span class="status status-teal">
  119. <span class="status-dot status-dot-animated"></span>
  120. Teal
  121. </span>
  122. <span class="status status-cyan">
  123. <span class="status-dot status-dot-animated"></span>
  124. Cyan
  125. </span>
  126. ```
  127. ## Lite status
  128. ```html example code vertical height="7rem"
  129. <span class="status status-blue status-lite">
  130. <span class="status-dot"></span>
  131. Blue
  132. </span>
  133. <span class="status status-azure status-lite">
  134. <span class="status-dot"></span>
  135. Azure
  136. </span>
  137. <span class="status status-indigo status-lite">
  138. <span class="status-dot"></span>
  139. Indigo
  140. </span>
  141. <span class="status status-purple status-lite">
  142. <span class="status-dot"></span>
  143. Purple
  144. </span>
  145. <span class="status status-pink status-lite">
  146. <span class="status-dot"></span>
  147. Pink
  148. </span>
  149. <span class="status status-red status-lite">
  150. <span class="status-dot"></span>
  151. Red
  152. </span>
  153. <span class="status status-orange status-lite">
  154. <span class="status-dot"></span>
  155. Orange
  156. </span>
  157. <span class="status status-yellow status-lite">
  158. <span class="status-dot"></span>
  159. Yellow
  160. </span>
  161. <span class="status status-lime status-lite">
  162. <span class="status-dot"></span>
  163. Lime
  164. </span>
  165. <span class="status status-green status-lite">
  166. <span class="status-dot"></span>
  167. Green
  168. </span>
  169. <span class="status status-teal status-lite">
  170. <span class="status-dot"></span>
  171. Teal
  172. </span>
  173. <span class="status status-cyan status-lite">
  174. <span class="status-dot"></span>
  175. Cyan
  176. </span>
  177. ```
  178. ## Status dots
  179. ```html code example centered separated height="7rem"
  180. <span class="status-dot status-blue"></span>
  181. <span class="status-dot status-azure"></span>
  182. <span class="status-dot status-indigo"></span>
  183. <span class="status-dot status-purple"></span>
  184. <span class="status-dot status-pink"></span>
  185. <span class="status-dot status-red"></span>
  186. <span class="status-dot status-orange"></span>
  187. <span class="status-dot status-yellow"></span>
  188. <span class="status-dot status-lime"></span>
  189. <span class="status-dot status-green"></span>
  190. <span class="status-dot status-teal"></span>
  191. <span class="status-dot status-cyan"></span>
  192. ```
  193. ### Animated dots
  194. ```html code example centered separated height="7rem"
  195. <span class="status-dot status-dot-animated status-blue"></span>
  196. <span class="status-dot status-dot-animated status-azure"></span>
  197. <span class="status-dot status-dot-animated status-indigo"></span>
  198. <span class="status-dot status-dot-animated status-purple"></span>
  199. <span class="status-dot status-dot-animated status-pink"></span>
  200. <span class="status-dot status-dot-animated status-red"></span>
  201. <span class="status-dot status-dot-animated status-orange"></span>
  202. <span class="status-dot status-dot-animated status-yellow"></span>
  203. <span class="status-dot status-dot-animated status-lime"></span>
  204. <span class="status-dot status-dot-animated status-green"></span>
  205. <span class="status-dot status-dot-animated status-teal"></span>
  206. <span class="status-dot status-dot-animated status-cyan"></span>
  207. ```
  208. ## Status indicator
  209. ```html code example vertical centered height="7rem"
  210. <span class="status-indicator status-blue status-indicator-animated">
  211. <span class="status-indicator-circle"></span>
  212. <span class="status-indicator-circle"></span>
  213. <span class="status-indicator-circle"></span>
  214. </span>
  215. <span class="status-indicator status-azure status-indicator-animated">
  216. <span class="status-indicator-circle"></span>
  217. <span class="status-indicator-circle"></span>
  218. <span class="status-indicator-circle"></span>
  219. </span>
  220. <span class="status-indicator status-indigo status-indicator-animated">
  221. <span class="status-indicator-circle"></span>
  222. <span class="status-indicator-circle"></span>
  223. <span class="status-indicator-circle"></span>
  224. </span>
  225. <span class="status-indicator status-purple status-indicator-animated">
  226. <span class="status-indicator-circle"></span>
  227. <span class="status-indicator-circle"></span>
  228. <span class="status-indicator-circle"></span>
  229. </span>
  230. <span class="status-indicator status-pink status-indicator-animated">
  231. <span class="status-indicator-circle"></span>
  232. <span class="status-indicator-circle"></span>
  233. <span class="status-indicator-circle"></span>
  234. </span>
  235. <span class="status-indicator status-red status-indicator-animated">
  236. <span class="status-indicator-circle"></span>
  237. <span class="status-indicator-circle"></span>
  238. <span class="status-indicator-circle"></span>
  239. </span>
  240. <span class="status-indicator status-orange status-indicator-animated">
  241. <span class="status-indicator-circle"></span>
  242. <span class="status-indicator-circle"></span>
  243. <span class="status-indicator-circle"></span>
  244. </span>
  245. <span class="status-indicator status-yellow status-indicator-animated">
  246. <span class="status-indicator-circle"></span>
  247. <span class="status-indicator-circle"></span>
  248. <span class="status-indicator-circle"></span>
  249. </span>
  250. <span class="status-indicator status-lime status-indicator-animated">
  251. <span class="status-indicator-circle"></span>
  252. <span class="status-indicator-circle"></span>
  253. <span class="status-indicator-circle"></span>
  254. </span>
  255. <span class="status-indicator status-green status-indicator-animated">
  256. <span class="status-indicator-circle"></span>
  257. <span class="status-indicator-circle"></span>
  258. <span class="status-indicator-circle"></span>
  259. </span>
  260. <span class="status-indicator status-teal status-indicator-animated">
  261. <span class="status-indicator-circle"></span>
  262. <span class="status-indicator-circle"></span>
  263. <span class="status-indicator-circle"></span>
  264. </span>
  265. <span class="status-indicator status-cyan status-indicator-animated">
  266. <span class="status-indicator-circle"></span>
  267. <span class="status-indicator-circle"></span>
  268. <span class="status-indicator-circle"></span>
  269. </span>
  270. ```