Snippet
Code to copy, with a copy button in the corner.
openvibe-shared/kitJSON
Build it
kit.snippet({ id: 'embed', code: '<iframe src="https://openvibe.live/embed/goosely" allow="autoplay; fullscreen"></iframe>' })Props
id- any?
code- string?
label- string?
Anatomy
- snippetCode to copy, with a copy button in the corner.
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
- Snippet
- Target
- At least 44 × 44 px on touch
- Focus
- Visible keyboard focus; follow reading order
States
- default
- focused
Tokens
color.bg.raisedcolor.text.primary
Android · Jetpack Compose
Material 3 Snippet
Use Snippet in Jetpack Compose with the shared tokens.
iOS · SwiftUI
Use Snippet in SwiftUI with the shared tokens.
Markup
Default
<div class="ovk-snip"><button type="button" class="ovk-icon-btn" data-ovk-copy="#embed" aria-label="Copy" title="Copy" hidden><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"/></svg></button><pre tabindex="0" id="embed"><code><iframe src="https://openvibe.live/embed/goosely" allow="autoplay; fullscreen"></iframe></code></pre></div>