# Indicator · MIAN

A count or status dot pinned to the corner of any element, avatars, icons, buttons.

- Id: `indicator` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/indicator
- Use for: notification dot, unread count, status dot on avatar.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Indicators

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/indicator/source