Component

Icon button

The same press, for an icon alone.

Import jellyfy/icon-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-icon	Component	A square button. Pair it with btn-sm, btn-md, or btn-lg.
btn-sm	Size	Small size
btn-md	Size	Medium size (default)
btn-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.
loading	State	An orbit of lights, because the face is square.

Colors

Give it an accessible name. Leave the svg without a size class. The button sets the icon size.

<button class="btn-icon primary" type="button" aria-label="Add">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
    <path d="M12 5v14M5 12h14" />
  </svg>
</button>

Sizes

<button class="btn-icon btn-sm" type="button" aria-label="Add small"></button>
<button class="btn-icon btn-md" type="button" aria-label="Add"></button>
<button class="btn-icon btn-lg" type="button" aria-label="Add large"></button>

Loading from state

Load adds loading on this icon button. Stop removes it. startJellyfy() sees the class change and puts the orbit on, then takes it off. The icon stays.

const [loading, setLoading] = useState(false);

<button
  className={loading ? "btn-icon primary loading" : "btn-icon primary"}
  type="button"
  aria-label="Add"
  aria-busy={loading}
>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
    <path d="M12 5v14M5 12h14" />
  </svg>
</button>
<button
  className="btn"
  type="button"
  onClick={() => setLoading((current) => !current)}
>
  {loading ? "Stop" : "Load"}
</button>