StatusBar

The bottom line: segments at the left, segments at the right.

import { StatusBar } from '@textui/core';

<StatusBar
  leading={[{ id: 'branch', label: 'main' }]}
  trailing={[{ id: 'pos', label: '12:4' }]}
/>

Props

| Prop | Type | Default | | | — | — | — | — | | leading | StatusSegment[] | [] | Segments before the gap and after it. Named leading/trailing rather than left/right because those are style props on every node. | | trailing | StatusSegment[] | [] | | | separator | string | | |

Plus everything on BoxProps.

Role: contentinfo.

leading and trailing rather than left and right, so the component still reads correctly under a right-to-left locale.

Each segment carries its own tone, which is how one indicator goes red without the bar changing colour.

See also

  • KeyHints - the other thing that usually lives on this line
  • BarLayout - a surface arranged as a bar

Back to top

MIT licensed. Pre-1.0 - the surface is still moving.