Component
Bump button
A transparent close control. The lights stay on.
Import jellyfy/bump-button.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 | |
|---|---|---|
| btn-bump | Component | No fill and no radius. Pair it with btn-sm or btn-lg for the other sizes. |
| btn-sm | Size | Small. Use it with btn-bump. |
| btn-lg | Size | Large. Use it with btn-bump. |
| 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. |
Close
Leave the svg without a size. The button sets the icon size. On a modal panel it sits 0.75rem from the top and the trailing edge.
<button class="btn-bump" type="button" aria-label="Close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
<path d="M18 6 6 18M6 6l12 12" />
</svg>
</button>Sizes
<button class="btn-bump btn-sm" type="button" aria-label="Close"></button>
<button class="btn-bump" type="button" aria-label="Close"></button>
<button class="btn-bump btn-lg" type="button" aria-label="Close"></button>A bump button on a slotted card, alert, or modal panel uses that surface’s text color.