Component

Button

The main action, with a soft press.

Import jellyfy/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	Component	The button.
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	Shows the sweep and a spinner. Put it on with a color, as in btn primary loading.

Colors

<button class="btn primary" type="button">Primary</button>
<button class="btn secondary" type="button">Secondary</button>
<button class="btn tertiary" type="button">Tertiary</button>
<button class="btn neutral" type="button">Neutral</button>
<button class="btn success" type="button">Success</button>
<button class="btn error" type="button">Error</button>
<button class="btn warning" type="button">Warning</button>
<button class="btn info" type="button">Info</button>

Sizes

Medium size (default)

<button class="btn btn-sm" type="button">Small</button>
<button class="btn btn-md" type="button">Medium</button>
<button class="btn btn-lg" type="button">Large</button>

Loading and disabled

Use the disabled attribute.

<button class="btn primary loading" type="button">Loading</button>
<button class="btn" type="button" disabled>Disabled</button>

Loading from state

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

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

<button
  className={loading ? "btn primary loading" : "btn primary"}
  type="button"
  aria-busy={loading}
>
  Save
</button>
<button
  className="btn"
  type="button"
  onClick={() => setLoading((current) => !current)}
>
  {loading ? "Stop" : "Load"}
</button>

A button with no color class uses the plain surface. A slot such as primary tints the fill.