OutputBox

Program output such as an install or build log, with an optional outcome. Pick it for text a tool printed; pick CodeBlock for source code.

OutputBox

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, OutputBox

npm installFinished with a warning

added 214 packages, and audited 215 packages in 4s

38 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability
To address it, run: npm audit fix

npm run buildFailed

Build failed: Cannot find module "./Missing.js".

No output yet.

Dark theme, OutputBox

npm installFinished with a warning

added 214 packages, and audited 215 packages in 4s

38 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability
To address it, run: npm audit fix

npm run buildFailed

Build failed: Cannot find module "./Missing.js".

No output yet.

High contrast theme, OutputBox

npm installFinished with a warning

added 214 packages, and audited 215 packages in 4s

38 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability
To address it, run: npm audit fix

npm run buildFailed

Build failed: Cannot find module "./Missing.js".

No output yet.

UsageLink to the section Usage

tsx

import { OutputBox } from '@skribly/ui/content'

tsx

<OutputBox
  label="Install output"
  title="npm install"
  text={output}
  isRunning={running}
  runningLabel="Running"
  status={{ tone: 'ok', label: 'Done' }}
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The outcome has a colour, an icon and a word.
The header is a polite status region, so the change from running to done is read once, not every line.
The output keeps the newest line in view unless you scrolled up, and the box is in the tab order for keyboard scrolling.

This demo runs through axe in all three themes on every test run. See what the tests check.