Answer

The answer first, then its rows, then what to do next.

openvibe-shared/kitJSON

Build it

kit.answer({ title: 'openvibe.live is reachable', badge: { text: 'Up', tone: 'ok' }, rows: [['Address', '104.21.32.1'], ['Answered in', '38 ms', { text: 'fast', tone: 'ok' }], ['Certificate', 'Valid until Jan 30, 2027']], next: [kit.button({ href: '/tools/dns', label: 'See every DNS record', kind: 'quiet', small: true })] })

Props

id: any?
body: string?
live: any?
next: list?
rows: list?
tone: string?
badge: any?
title: string?
actions: list?

Anatomy

answerThe answer first, then its rows, then what to do next.

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: Answer
Target: At least 44 × 44 px on touch
Focus: Visible keyboard focus; follow reading order

States

default

Tokens

color.bg.raised
color.text.primary

Android · Jetpack Compose

Material 3 Answer

Use Answer in Jetpack Compose with the shared tokens.

iOS · SwiftUI

Use Answer in SwiftUI with the shared tokens.

Markup

Default

<section class="ovk-answer" aria-live="polite"><div class="ovk-answer-head"><h2>openvibe.live is reachable</h2><span class="ovk-badge ovk-badge--ok">Up</span></div><dl class="ovk-answer-rows"><div><dt>Address</dt><dd>104.21.32.1</dd></div><div><dt>Answered in</dt><dd>38 ms <span class="ovk-pill ovk-pill--ok">fast</span></dd></div><div><dt>Certificate</dt><dd>Valid until Jan 30, 2027</dd></div></dl><div class="ovk-answer-next"><a class="ovk-btn ovk-btn--quiet ovk-btn--small" href="/tools/dns"><span>See every DNS record</span></a></div></section>