Component
Message
A short note under a control. With no color it uses the plain content color. A slot uses that solid.
Import jellyfy/message.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 | |
|---|---|---|
| message | Component | The note. Medium is 12px. |
| message-sm | Size | Small size |
| message-md | Size | Medium size (default) |
| message-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
With no color class, the note uses the plain content color. Add error, success, or warning when the note should use that solid.
Primary
Secondary
Tertiary
Neutral
Success
Error
Warning
Info
<p class="message primary">Primary</p>
<p class="message secondary">Secondary</p>
<p class="message tertiary">Tertiary</p>
<p class="message neutral">Neutral</p>
<p class="message success">Success</p>
<p class="message error">Error</p>
<p class="message warning">Warning</p>
<p class="message info">Info</p>Sizes
Small
Medium
Large
<p class="message message-sm">Small</p>
<p class="message message-md">Medium</p>
<p class="message message-lg">Large</p>A color class on a parent is inherited. A message inside a primary card follows that card unless the message itself says error, or whichever color you mean.