docs / core / log-line

LogLine

one line of a log: a message tagged with a severity color and its source. LogList stacks them, InlineError is the single-line preset for a panel that failed to load.

intensity · recedesrsc · server

provenance

shaped from sisu-plus

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

a LogList inside a Card or dashboard panel for recent activityInlineError in place of the content a failed fetch never deliveredbare LogLines outside a LogList lose the surface and dividersnot a terminal. commands to run go in Terminal or CodeSnippet

a11y

LogList is role="log" with aria-live="polite" · InlineError is an alert · the count chip reads as "repeated n times"jest-axe
levels
error/api/coursesFailed to fetch: 502 Bad Gatewayrepeated 3 times
warnparserSkipped 3 malformed rows
infosyncReconciled 128 records
successwriterWrote 128 records
debugcachehit ratio 0.94
expandable detail
14:22:07.412error/api/coursesFailed to fetch: 502 Bad Gateway
at fetchCourses (api/courses.ts:41) at loadDashboard (views/dashboard.tsx:88)
14:22:06.771infobootCold start
inline error

props

proptypedefaultnotes
level"error" | "warn" | "info" | "debug" | "success"—log levels, not semantic roles. they resolve to danger, warning, info, muted and success.
sourceReactNode—endpoint, module or subsystem the line came from.
countnumber—repeat collapsing. values at or below 1 render no chip.
detailsReactNode—stack trace or payload. its presence swaps the row to a <details> disclosure, so treat it as static per entry.
timestampReactNode—optional leading column, tabular figures.

get it

bun add @usva-ui/reactcopy
usagecopy
import { InlineError, LogLine, LogList } from "@usva-ui/react/primitives/log-line";

<LogList>
  <LogLine level="error" source="/api/courses" count={3}>
    Failed to fetch: 502 Bad Gateway
  </LogLine>
</LogList>

<InlineError source="/api/courses" error={err} />