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.
- Use spinners for short, local work. Use skeletons when the future content structure matters.
- Use badges for persistent state. Keep labels short, semantic and consistent.
- Use icons as supporting signals. Pair them with visible text unless the control already has an accessible label.
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 a strong theme level on standard application surfaces so the motion remains visible.
Inverse Surface
On dark or emphasized backgrounds, switch to the matching secondary theme class so the spinner stays readable.
Usage
<div class="monster-spinner monster-theme-primary-4" 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
- Keep labels short and scannable, such as
Published,Draft,ReadyorBlocked. - Do not use badges as buttons, long labels or replacements for paragraph text.
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-2-info | Neutral help or meta information | |
monster-icon-primary-2-warning | Warnings that still allow the workflow to continue | |
monster-icon-primary-2-question | Context hints or secondary explanations | |
monster-icon-primary-2-plus | Add, create or expand actions | |
monster-icon-primary-2-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-2-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 or skeleton?
Use a spinner for short, localized operations such as applying a filter or saving a draft. Use a skeleton when a larger content area is loading and its future structure helps the user.
Badge or icon?
Use a badge when the state should remain visible as text. Use an icon when the signal is secondary, space is constrained or it supports nearby text.