Marks and status

Unread dot

How many are new. Nothing at zero; 9+ past nine.

openvibe-shared/kitJSON

Build it

kit.dot(3) + kit.dot(42)

Props

n
any

Anatomy

  • dotHow many are new. Nothing at zero; 9+ past nine.

Behaviour and access

Keyboard
Standard focus order
Outside tap
Leaves it open
Scroll
The page still scrolls
Reduced motion
Remove movement; keep the state change.
Name
Unread dot
Target
At least 44 × 44 px on touch
Focus
Visible keyboard focus; follow reading order

States

  • default

Tokens

  • color.accent.strong
  • size.tap

Android · Jetpack Compose

Material 3 Unread dot

Use Unread dot in Jetpack Compose with the shared tokens.

iOS · SwiftUI

Use Unread dot in SwiftUI with the shared tokens.

Markup

Default

<span class="ovk-dot" aria-label="3 new">3</span><span class="ovk-dot" aria-label="42 new">9+</span>