/// Typography

BracketIndex

The bracket-index enumerator tell — mono, muted square brackets around an as-typed value.

import { BracketIndex } from "@protocore/pds";

View as Markdown

Basics

BracketIndex wraps a value in muted square brackets and zero-pads numbers to two digits — [ 01 ].

Sequence

Its natural home is enumerating a list of steps, cards, or tabs — a numbered rail that keeps its own quiet, monospaced column.

01
Submit intent
02
Verify DVN quorum
03
Execute on destination

Padding & raw values

pad sets the zero-pad width (default 2); pad={0} prints the value as-typed. String values pass through verbatim.

070077EID

A signature tell

The bracket index is the second of the three signature tells. It is the padded square-bracket enumerator — [ 01 ], [ 02 ], [ 03 ] — typically pinned to the top-right of a card or prefixing a step in a sequence.

Where the Eyebrow names a section, the bracket index *counts within* it. The mono family and muted brackets make it read as a coordinate or a catalogue number rather than content — a subtle piece of infrastructure signage. Zero-padding keeps the numbers a fixed width so a stacked list of indices forms a clean vertical seam.

When to use it

Use BracketIndex to enumerate an ordered set: process steps, feature cards, tab labels, changelog entries. It is deliberately monochrome.

That monochrome-ness is the line between it and SignalCount, the third tell: the bracket index is a *static ordinal* in muted brackets, while SignalCount is the *one live green number* on the page. If a bracketed number should draw the eye as a live metric, it is a SignalCount, not a BracketIndex. For general metadata that isn't an ordinal, use Tag.

Guidelines

Use it to enumerate ordered items — steps, cards, tabs.
Keep the default two-digit padding so stacked indices align.
Pass a string value for non-numeric enumerators (`[ EID ]`).
Pin it top-right of a card, or lead a row with it.

Don't

Don't tint it green — a live metric is a `SignalCount`.
Don't use it for a status or category label — that is `Badge` / `Tag`.
Don't mix padded and unpadded indices in the same sequence.
Don't wrap prose or long strings in it; it is a compact ordinal.

Accessibility

Renders an inline `span`; the brackets are `aria-hidden` so assistive tech announces only the value.
When the index conveys order, place it inside a real `<ol>`/`<li>` so the sequence is programmatically exposed.
The value uses tabular figures for a fixed-width, aligned column.

Mobile (React Native)

Preview. @protocore/pds-mobile ships the React Native sibling of BracketIndex. It mirrors the web API where React Native allows; the package is a preview with no device-level QA yet, so pin it and expect small changes.

Import it from the mobile package (not @protocore/pds), inside a <PdsProvider> — there is no stylesheet, so style (a ViewStyle) replaces className and every value comes from the theme:

import { BracketIndex } from "@protocore/pds-mobile";

Parity with web. The [ 01 ] enumerator — mono, tabular, zero-padded.

Same index / pad API as web; set pad={0} to disable zero-padding.

<BracketIndex index={1} />

`BracketIndex` props

Prop	Type	Default	Description
`className`	`string`	—
`index` *	`string \| number`	—	The value to enumerate. Numbers are zero-padded (`1` → `[ 01 ]`).
`pad`	`number`	`2`	Zero-pad width for numeric values. Default 2; set 0 to disable.
`style`	`CSSProperties`	—