Labels
What a stream, recording, picture or post carries (nudity, strong language, graphic, 18+, flashing lights, spoilers), in words. Only the labels in force: a suggestion is the creator's to confirm. The page marks the thing itself with kit.labelsAttr so each viewer's own choice (show, blur, hide) applies.
openvibe-shared/kitJSON
Build it
kit.labels(['language', '18+'])Props
list- any
label- string?
Anatomy
- labelsWhat a stream, recording, picture or post carries (nudity, strong language, graphic, 18+, flashing lights, spoilers), in words. Only the labels in force: a suggestion is the creator's to confirm. The page marks the thing itself with kit.labelsAttr so each viewer's own choice (show, blur, hide) appli
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
- Labels
- Target
- At least 44 × 44 px on touch
- Focus
- Visible keyboard focus; follow reading order
States
- default
Tokens
color.accent.basecolor.text.primary
Android · Jetpack Compose
Material 3 Labels
Use Labels in Jetpack Compose with the shared tokens.
iOS · SwiftUI
Use Labels in SwiftUI with the shared tokens.
Markup
Default
<ul class="ovk-labels" aria-label="Content labels"><li class="ovk-label" data-label="language">Strong language</li><li class="ovk-label ovk-label--adult" data-label="18+">18+</li></ul>