<!-- Protocore Design System — BracketIndex -->
# BracketIndex

- **Category:** Typography (`typography`)
- **Slug:** `typography/bracket-index`
- **Status:** stable
- **Platforms:** web, mobile
- **Import:** `import { BracketIndex } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/typography/bracket-index

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

## 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`.

## 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:

```tsx
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.

```tsx
<BracketIndex index={1} />
```

## Props

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

## Examples

### Basics

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

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

export default function BracketIndexBasics() {
  return <BracketIndex index={1} />;
}
```

### Sequence

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

```tsx
import { BracketIndex, Text } from "@protocore/pds";

export default function BracketIndexSequence() {
  const steps = ["Submit intent", "Verify DVN quorum", "Execute on destination"];
  return (
    <ol
      style={{
        listStyle: "none",
        margin: 0,
        padding: 0,
        display: "flex",
        flexDirection: "column",
        gap: 12,
      }}
    >
      {steps.map((label, i) => (
        <li key={label} style={{ display: "flex", gap: 12, alignItems: "baseline" }}>
          <BracketIndex index={i + 1} />
          <Text>{label}</Text>
        </li>
      ))}
    </ol>
  );
}
```

## Guidelines

**Do**

- 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

**Notes**

- 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.

## Related

`signal-count`, `eyebrow`, `text`

---

© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/