Component

Editor Status Bar

An IDE-style bottom bar displaying cursor position, language, encoding, and other editor metadata. Accepts convenience props for the most common segments or a fully custom segment list.

From convenience props

Pass line, col, language, and friends — the bar assembles them into left/right groups automatically.

Editor pane

Ln 17, Col 1Spaces: 4

Python 3.11.4UTF-8LFAuto-saved

Custom segments

Pass an explicit segments array to take full control over which items appear and where. Each segment carries an align and an optional tone.

Editor pane

main0 errors2 warnings

TypeScriptPrettier

Minimal

Cursor position only — the smallest meaningful status bar.

Editor pane

Ln 1, Col 1

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { EditorStatusBar } from '@refraction-ui/react'

export function MyEditor() {
  return (
    <div>
      {/* ... editor content ... */}
      <EditorStatusBar
        line={17}
        col={1}
        indentation="Spaces: 4"
        language="Python 3.11.4"
        encoding="UTF-8"
        eol="LF"
        status="Auto-saved"
      />
    </div>
  )
}

Custom segments usage

tsx

import { EditorStatusBar } from '@refraction-ui/react'

export function MyEditor() {
  return (
    <EditorStatusBar
      segments={[
        { id: 'branch', label: 'main', align: 'left', tone: 'accent' },
        { id: 'errors', label: '0 errors', align: 'left', tone: 'muted' },
        { id: 'lang', label: 'TypeScript', align: 'right', tone: 'accent' },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
`segments`	`StatusSegment[]`	--	Explicit segments for full control. When provided, all convenience props are ignored. Each segment: `{ id, label, align?: "left"\|"right", tone?: "default"\|"muted"\|"accent" }`.
`line`	`number`	--	Current line number (1-indexed). Combined with `col` to show "Ln N, Col N".
`col`	`number`	--	Current column number (1-indexed). Combined with `line` to show cursor position.
`indentation`	`string`	--	Indentation descriptor shown on the left, e.g. `"Spaces: 4"` or `"Tab Size: 2"`.
`language`	`string`	--	Language / runtime label shown on the right, e.g. `"Python 3.11.4"`.
`encoding`	`string`	--	File encoding shown on the right, e.g. `"UTF-8"`.
`eol`	`string`	--	End-of-line sequence shown on the right, e.g. `"LF"` or `"CRLF"`.
`status`	`string`	--	Persistence status label shown on the right, e.g. `"Auto-saved"`.
`className`	`string`	--	Additional CSS classes to apply to the bar.