Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Indicator

Places a badge or status dot on any corner or edge of another element.

Actions and feedback8 classesNo JavaScriptLight and dark

Example

Full

Classes

8 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the indicator. On a <div> in the example. Sets inline-flex display and width.
CSS
.indicator {
  position: relative;
  display: inline-flex;
  width: max-content;
  vertical-align: middle;
}
Modifier Modifier, combined with the indicator class. On a <span> in the example. Sets absolute position, stacking order, offsets, transform, text style and shadow, and --ix and --iy.
CSS
.indicator-item.status {
  box-shadow: 0 0 0 2px var(--background);
}

.indicator-item {
  --ix: 50%;
  --iy: -50%;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  translate: var(--ix) var(--iy);
  white-space: nowrap;
}
Modifier Modifier, combined with the indicator class. On a <span> in the example. Sets offsets, and --ix.
CSS
.indicator-start {
  right: auto;
  left: 0;
  --ix: -50%;
}
Modifier Modifier, combined with the indicator class. On a <span> in the example. Sets offsets, and --ix.
CSS
.indicator-center {
  right: auto;
  left: 50%;
  --ix: -50%;
}
Modifier Modifier, combined with the indicator class. Not used in the example above. Sets offsets, and --ix.
CSS
.indicator-end {
  left: auto;
  right: 0;
  --ix: 50%;
}
Modifier Modifier, combined with the indicator class. Not used in the example above. Sets offsets, and --iy.
CSS
.indicator-top {
  bottom: auto;
  top: 0;
  --iy: -50%;
}
Modifier Modifier, combined with the indicator class. Not used in the example above. Sets offsets, and --iy.
CSS
.indicator-middle {
  bottom: auto;
  top: 50%;
  --iy: -50%;
}
Modifier Modifier, combined with the indicator class. On a <span> in the example. Sets offsets, and --iy.
CSS
.indicator-bottom {
  top: auto;
  bottom: 0;
  --iy: 50%;
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Indicator: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-8 p-2">
  <div class="indicator">
    <span class="indicator-item badge badge-danger badge-solid badge-sm badge-pill">9</span>
    <button class="btn btn-outline btn-neutral btn-square" aria-label="Notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.9 1.9 0 0 0 3.4 0"/></svg></button>
  </div>
  <div class="indicator">
    <span class="indicator-item indicator-bottom status status-online status-lg"></span>
    <div class="size-12 rounded-xl bg-primary"></div>
  </div>
  <div class="indicator">
    <span class="indicator-item indicator-start badge badge-primary badge-solid badge-sm">New</span>
    <div class="h-12 w-24 rounded-lg border bg-surface"></div>
  </div>
  <div class="indicator">
<!-- the full example is in the Code tab above -->

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Actions and feedbackSkeletonShimmering placeholders for content that is still loading: blocks, text lines and circles.Actions and feedbackTooltipA CSS only tooltip read from the data-tip attribute, shown on hover and keyboard focus, in four positions and eight tones.Actions and feedbackStatusA small status dot for presence and health, with an optional ping animation.Actions and feedbackEmpty stateA friendly placeholder for empty lists and search results, with an icon, text and actions.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.