Marks and status

Badge

A word beside a title: live, new, a state. Five tones.

openvibe-shared/kitJSON

Build it

kit.badge('live', 'live') + kit.badge('new', 'accent') + kit.badge('paid', 'ok') + kit.badge('expiring', 'warn') + kit.badge('failed', 'bad')

Props

text
any
tone
string?

Anatomy

  • badgeA word beside a title: live, new, a state. Five tones.

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
Badge
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 Badge

Use Badge in Jetpack Compose with the shared tokens.

iOS · SwiftUI

Use Badge in SwiftUI with the shared tokens.

Markup

Default

<span class="ovk-badge ovk-badge--live">live</span><span class="ovk-badge ovk-badge--accent">new</span><span class="ovk-badge ovk-badge--ok">paid</span><span class="ovk-badge ovk-badge--warn">expiring</span><span class="ovk-badge ovk-badge--bad">failed</span>