One line of state with a glyph and a word: [ ok ], [wait], [fail] or [info].
import { StatusLine } from "@meowerse/ui"; · source packages/ui/src/components/StatusLine.tsx
variants and states
[ ok ]ok: online
ok
[wait]working: connecting…
wait
[fail]error: offline — check your connection
fail, with an action
[info]info: no public service to check
info
props
prop
type
default
required
state
StatusState the state to show; fail renders as an alert.
—
yes
children
ReactNode the status text.
—
yes
live
boolean announces the non-fail states as a polite live region too.
false
no
action
ReactNode an action shown after the text, e.g. a retry button.
—
no
className
string extra class names to append.
—
no
css custom properties
variable
dark
light
--c-danger
#ff6b63
#b42318
--c-fg-muted
#b3b3af
#46464a
--c-info
#7cc4ff
#1d5fa8
--c-ok
#3ddc84
#11652f
--c-warn
#ffb454
#8a5200
--fs-3
0.875rem
same
--leading-normal
1.5
same
--sp-2
8px
same
Classes: .mw-status. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.
usage
ok
tsx
import { StatusLine } from "@meowerse/ui";
<StatusLine state="ok">online</StatusLine>
html (needs @meowerse/ui/tokens.css)
<p class="mw-status mw-status--ok"><span class="mw-status__tag" aria-hidden="true">[ ok ]</span><span class="sr-only">ok: </span><span class="mw-status__text">online</span></p>
wait
tsx
import { StatusLine } from "@meowerse/ui";
<StatusLine state="wait" live>connecting…</StatusLine>
import { StatusLine } from "@meowerse/ui";
<StatusLine state="fail" action={<Button size="sm">retry</Button>}>offline — check your connection</StatusLine>
info
tsx
import { StatusLine } from "@meowerse/ui";
<StatusLine state="info">no public service to check</StatusLine>
html (needs @meowerse/ui/tokens.css)
<p class="mw-status mw-status--info"><span class="mw-status__tag" aria-hidden="true">[info]</span><span class="sr-only">info: </span><span class="mw-status__text">no public service to check</span></p>
accessibility
The bracketed tag is hidden from assistive tech and a word (ok, working, error, info) is read instead.
fail is an alert; with live, the other states are a polite status.
Colours come from the theme tokens, so every state passes AA in both themes.
do and don't
[ ok ] do
Say what is happening and what to do: "[fail] offline — retry".