Status indicator

Shows the condition of a device as a dot and a word.

Live React portWildStatusIndicator.vueData Display/Status IndicatorWStatusIndicator, WStatusRow, WStatusDot

Try it

Change the status, then turn the pulse and label off.

Online

Status

Size

Pulse

Label

<WildStatusIndicator
  status="online"
  size="md"
/>

When to use

Use it for a condition that changes by itself, such as whether a logger is reporting.
Use the small size at the start of a table or list row, so every row gets one.
Use the pulse for one headline status. Turn it off in lists.

Don’t use it

For a fixed category, such as a site type. Use Badge.
For something that needs a reply. Use Alert.
For how far a task has got. Use Progress.

States

Six statuses. Online, warning and error pulse by default.

Online

online

Warning

warning

Error

error

Offline

offline

Info

info

Success

success

<WildStatusIndicator status="online" />
<WildStatusIndicator status="warning" />
<WildStatusIndicator status="error" />
<WildStatusIndicator status="offline" />
<WildStatusIndicator status="info" />
<WildStatusIndicator status="success" />

Sizes

Three dots: 8, 12 and 16px. The default is md.

Online

sm · 8

Online

md · 12

Online

lg · 16

<WildStatusIndicator status="online" size="sm" :pulse="false" />
<WildStatusIndicator status="online" size="md" :pulse="false" />
<WildStatusIndicator status="online" size="lg" :pulse="false" />

Device rows

For a list of devices, use WStatusRow. Give it onClick when the row opens the device.

<WStatusRow
  first
  status="offline"
  title="Bore 12"
  meta="Offline · last reading 3 days ago"
  onClick={openDevice}
/>

Start every meta line with the status word and end it with a time, so the status still reads without colour.

Content

Name the condition in one or two words, such as Online or Offline.
Put the time since the last reading beside it.
Use sentence case.

Accessibility

The dot is hidden from screen readers and the word is read, or the label when showLabel is off. The pulse stops when reduced motion is on.

Key	What it does
Tab	Moves focus to a row that has onClick.
Enter / Space	Opens the row.

Props

Prop	Type	Default	Description
status	'online' \| 'offline' \| 'warning' \| 'error' \| 'info' \| 'success'	—	The condition. Sets the colour and default label.
size	'sm' \| 'md' \| 'lg'	'md'	Dot of 8, 12 or 16px.
label	string	—	Replaces the default label.
pulse	boolean	true	Halo on online, warning and error.
showLabel	boolean	true	Shows the word. Off, it becomes the accessible name.
children	ReactNode	—	Replaces the label text. The Vue default slot.

WStatusRow A device row: the dot, a name and a meta line.

Prop	Type	Default	Description
status	StatusKind	—	The condition, as above.
title	string	—	The device name.
meta	string	—	The status word and time since the last reading.
trailing	ReactNode	—	Optional content at the right edge, such as a badge.
onClick	() => void	—	Makes the row a button with hover and focus.
state	'rest' \| 'hover' \| 'active' \| 'focus'	—	Pins a state for static examples. Omit for live use.
first	boolean	false	Drops the top divider. Set it on the first row.
pulse	boolean	false	Halo on the dot. Off in lists.

Tokens

Token	Value	Where it lands
--global-green-800	#019939	Online and success.
--global-squash-1000	#9D6508	Warning.
--global-red-800	#E12121	Error.
--global-blue-1000	#1877F2	Info, and the row focus ring.
--global-neutral-grey-900	#7F7D83	Offline.
--global-neutral-grey-1000	#4F4D55	Label.
--global-green-300	#C1F4D4	Online pulse halo.
--global-squash-300	#FFE9BA	Warning pulse halo.
--global-red-300	#FFC9C9	Error pulse halo.
--global-neutral-grey-1300	#0A090B	Row title.
--global-neutral-grey-1100	#2D2B32	Row meta line.
--global-neutral-grey-300	#F1F1F1	Row hover.
--global-neutral-grey-400	#ECECED	Row press and divider.
--radius-full	9999px	The dot.