Indicator
A count or status dot pinned to the corner of any element, avatars, icons, buttons.
Indicators
AP
<span class="mn-indicator"><span class="mn-indicator-item mn-badge mn-danger" aria-hidden="true">3</span><button class="mn-btn mn-btn-outline mn-btn-icon" aria-label="Notifications, 3 unread"><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></span>
<span class="mn-indicator mn-indicator-bottom"><span class="mn-indicator-item mn-indicator-dot mn-success" aria-hidden="true"></span><span class="mn-avatar" role="img" aria-label="Ana, online">AP</span></span>
<span class="mn-indicator"><span class="mn-indicator-item mn-indicator-dot mn-indicator-pulse mn-primary" aria-hidden="true"></span><button class="mn-btn mn-btn-soft"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 13h5l1.5 2h5L16 13h5"/><path d="M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Z"/></svg> Inbox</button></span>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/indicator.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-indicator | Wrapper. |
| mn-indicator-item | The pinned element: a badge or mn-indicator-dot. |
| mn-indicator-dot · mn-indicator-pulse | A plain or pulsing dot. |
| mn-indicator-bottom · mn-indicator-start · mn-indicator-inset | Placement. |
Accessibility
- The dot is decorative: say the same thing in text, e.g. aria-label="Inbox, 3 unread" on the button, or a visually hidden span.