UI kit reference

components/SegmentSpinner

import { … } from 'zidane-ui'ui/src/components/SegmentSpinner.tsx

Breadcrumb (long path truncates left)

EditableTitle (double-click)

Rate limit the chat endpoint

DiffCounts, RowBadge, Highlighted

+14−2+120−8mergeddraft3 filessession-title.ts

SegmentSpinner

ZidaneMark

Components#

`SegmentSpinner`Component#

Renders a busy indicator of five pills that fill left to right, then drain, matching the terminal UI's segment bar. It is a status element, pure CSS, and static under reduced motion.

TypeScript

function SegmentSpinner(props: SegmentSpinnerProps): Element

Parameters

Parameters
Name	Type	Description
props	`SegmentSpinnerProps`	Component props.

Returns

Element

Props

SegmentSpinner props
Name	Type	Default	Description
className?	`string`		Extra classes on the spinner.
label?	`string`		Accessible name and tooltip. Defaults to the `working` label from `useLabels`.
size?	`Size`		`xs` fits 10px text (Timeline badges), `sm` 12–13px, `md` header/footer.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
tone?	`Tone`	`'inherit'`	Colour of the pills. `inherit` follows the surrounding text colour.

ui/src/components/SegmentSpinner.tsx:58

Interfaces#

`SegmentSpinnerProps`Interface#

Props for SegmentSpinner.

TypeScript

interface SegmentSpinnerProps

Properties

SegmentSpinnerProps properties
Name	Type	Default	Description
className?	`string`		Extra classes on the spinner.
label?	`string`		Accessible name and tooltip. Defaults to the `working` label from `useLabels`.
size?	`Size`		`xs` fits 10px text (Timeline badges), `sm` 12–13px, `md` header/footer.
style?	`CSSProperties`		Inline styles on the root element, merged after the component's own.
tone?	`Tone`	`'inherit'`	Colour of the pills. `inherit` follows the surrounding text colour.

ui/src/components/SegmentSpinner.tsx:20