Utilities and Feedback
This page covers the shared CSS utilities that communicate status, progress and meaning across the library. Use them when you need fast visual feedback without introducing a full component.
For Developers
These styles are lightweight building blocks. They are useful in app shells, async states, table cells, badges, notifications and inline helper content where a full custom element would be too heavy.
They are designed to work with Monster color tokens and theme classes, so the same markup stays compatible with dark mode and theme changes.
For Designers
Think of this page as the small visual language around the larger components. Badges, icons and loading affordances should reinforce hierarchy and state, not create new local styles for each product area.
Use the semantic variants consistently. A warning should look like a warning everywhere, independent of the surrounding component.
What Belongs Here
Loading Feedback
Use the spinner when a concrete action is in progress and the user needs a short-lived progress affordance. Prefer skeletons for larger content surfaces where structure matters more than raw motion.
Status Encoding
Use badges for compact state labels such as status, environment, role or change state. Use icons when you need a fast visual cue next to text or inside a constrained control.
Spinner
The spinner is a pure CSS utility class. It is intentionally generic, so you can size it per use case and combine it with the correct foreground and background pairing.
Default Surface
Use the default appearance on standard application surfaces.
Inverse Surface
On dark or emphasized backgrounds, switch to the matching secondary theme class so the spinner stays readable.
Usage
<div class="monster-spinner" style="width: 3rem; height: 3rem;"></div>Always set width and height explicitly. Keep the spinner close to the affected action or content block instead of placing it as a generic page-level decoration.
Badges
Badges compress short, meaningful state into a small label. The semantic variants should stay stable across the whole system.
Guidelines
Good badge usage
Keep labels short, semantic and scannable. Good examples are Published, Draft, Ready or Blocked.
Avoid
Do not use badges as full buttons, long marketing labels or replacements for paragraph text. They should clarify state, not carry dense content.
Icons
Monster exposes utility icon classes for common system states and actions. Use them inline with text, in badges, or inside compact controls where a full SVG asset would be unnecessary.
| Example | Class | Recommended use |
monster-icon-primary-1-info | Neutral help or meta information | |
monster-icon-primary-1-warning | Warnings that still allow the workflow to continue | |
monster-icon-primary-1-question | Context hints or secondary explanations | |
monster-icon-primary-1-plus | Add, create or expand actions | |
monster-icon-primary-1-gear | Settings and configuration entry points | |
monster-icon-success-1 | Positive completion and valid state | |
monster-icon-warning-1 | Warning states with semantic color emphasis | |
monster-icon-error-1 | Error and failure states |
Usage
<span class="monster-icon-primary-1-info"></span>Prefer pairing icons with visible text unless the surrounding control already provides an accessible label.
Create a Custom Icon
If the bundled utility classes are not enough, use the icon mixin so custom icons still behave like the built-in ones.
@import "@schukai/monster/source/components/style/mixin/icon.pcss";
@mixin icon my-icon {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14Zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16Z'/%3E%3Cpath fill='currentColor' d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8Z'/%3E%3C/svg%3E");
}Choose the Right Tool
Spinner vs. Skeleton
Use a spinner for short, localized operations such as reloading a button state, applying a filter or saving a draft. Use a skeleton when a larger content area is loading and the user benefits from seeing the future structure.
Badge vs. Icon
Use a badge when the state should remain visible as text. Use an icon when the signal is secondary, space is constrained or the icon only supports nearby text.