Marks and status

Notice

A sentence about what just happened: ok, info, warn or error. Errors are announced.

openvibe-shared/kitJSON

Build it

kit.notice({ kind: 'ok', text: 'Saved. Every OpenVibe site follows.' }) + kit.notice({ kind: 'warn', text: 'Your stream key expires in 3 days.' }) + kit.notice({ kind: 'error', text: 'That name is taken. Try another.' })

Props

html
any?
kind
string?
text
string?

Anatomy

  • iconsize size.icon
  • textcolor color.text.primary

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
its text
Target
At least 44 × 44 px on touch
Focus
none; errors are announced

States

  • default

Tokens

  • size.icon
  • color.text.primary

Android · Jetpack Compose

Row

@Composable fun OvNotice(text: String, kind: OvNoticeKind = OvNoticeKind.Info) { val c = MaterialTheme.colorScheme val tint = when (kind) { OvNoticeKind.Error -> c.error; OvNoticeKind.Ok -> c.primary; else -> c.tertiary } Row(Modifier.fillMaxWidth().semantics { liveRegion = if (kind == OvNoticeKind.Error) LiveRegionMode.Assertive else LiveRegionMode.Polite } .background(tint.copy(alpha = .12f), RoundedCornerShape(OvScale.RadiusSm)).padding(OvScale.SpaceMd), horizontalArrangement = Arrangement.spacedBy(OvScale.SpaceSm)) { Icon(if (kind == OvNoticeKind.Error) Icons.Default.Error else Icons.Default.Info, null, tint = tint) Text(text, color = c.onSurface) } }

iOS · SwiftUI

struct OvNotice: View { let text: String var isError = false var body: some View { Label(text, systemImage: isError ? "exclamationmark.triangle" : "info.circle") .padding(OvScale.spaceMd).frame(maxWidth: .infinity, alignment: .leading) .background((isError ? OvTokens.colorStatusBadText : OvTokens.colorStatusInfoText).opacity(0.12), in: .rect(cornerRadius: OvScale.radiusSm)) .accessibilityAddTraits(isError ? [.updatesFrequently] : []) } }

Markup

Default

<p class="ovk-notice ovk-notice--ok" role="status"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg><span>Saved. Every OpenVibe site follows.</span></p><p class="ovk-notice ovk-notice--warn" role="status"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 4 2.8 19.5h18.4Z"/><path d="M12 10v4M12 17h.01"/></svg><span>Your stream key expires in 3 days.</span></p><p class="ovk-notice ovk-notice--error" role="alert"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 4 2.8 19.5h18.4Z"/><path d="M12 10v4M12 17h.01"/></svg><span>That name is taken. Try another.</span></p>