Receipt

A result and what it took: the answer first, then one quiet line of facts.

openvibe-shared/kitJSON

Build it

kit.receipt({ title: 'Clip saved', body: 'The last 30 seconds of goosely\'s stream are in your clips.', facts: [['Length', '0:30'], ['Size', '4.2 MB'], ['Kept', 'until you remove it']], actions: [kit.button({ href: '/clips', label: 'Open your clips', kind: 'quiet', small: true })] })

Props

id: any?
body: string?
tone: string?
facts: list?
title: string?
actions: list?

Anatomy

receiptA result and what it took: the answer first, then one quiet line of facts.

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

States

default

Tokens

color.text.muted
color.status.bad.base

Android · Jetpack Compose

Material 3 Receipt

Use Receipt in Jetpack Compose with the shared tokens.

iOS · SwiftUI

Use Receipt in SwiftUI with the shared tokens.

Markup

Default

<section class="ovk-receipt"><div class="ovk-receipt-head"><h2>Clip saved</h2><span class="ovk-receipt-acts"><a class="ovk-btn ovk-btn--quiet ovk-btn--small" href="/clips"><span>Open your clips</span></a></span></div><div class="ovk-receipt-body">The last 30 seconds of goosely's stream are in your clips.</div><dl class="ovk-receipt-facts"><div><dt>Length</dt><dd>0:30</dd></div><div><dt>Size</dt><dd>4.2 MB</dd></div><div><dt>Kept</dt><dd>until you remove it</dd></div></dl></section>