Component
Badge
A small pill in any of the eight colors.
Import jellyfy/badge.css with jellyfy/material.css and jellyfy/motion.css. Or import jellyfy/jellyfy.css, which already includes this file and every other component.
Classes
| Class | Type | |
|---|---|---|
| badge | Component | The pill. |
| badge-sm | Size | Small size |
| badge-md | Size | Medium size (default) |
| badge-lg | Size | Large size |
| primary | Color | Indigo by default. |
| secondary | Color | Pink by default. |
| tertiary | Color | Teal by default. |
| neutral | Color | Gray by default. |
| success | Color | Green by default. |
| error | Color | Red by default. |
| warning | Color | Amber by default. |
| info | Color | Sky by default. |
Colors
PrimarySecondaryTertiaryNeutralSuccessErrorWarningInfo
<span class="badge primary">Primary</span>
<span class="badge secondary">Secondary</span>
<span class="badge tertiary">Tertiary</span>
<span class="badge neutral">Neutral</span>
<span class="badge success">Success</span>
<span class="badge error">Error</span>
<span class="badge warning">Warning</span>
<span class="badge info">Info</span>Sizes
SmallMediumLarge
<span class="badge badge-sm">Small</span>
<span class="badge badge-md">Medium</span>
<span class="badge badge-lg">Large</span>A badge uses the small drop shadow, the same step as a mark or a range thumb.