Step Marker

A small filled chip holding a step's number. Use it wherever a sequence needs to be counted — onboarding flows, how-to sections, numbered feature lists.

<x-wirekit::row gap="md" align="center">
    <x-wirekit::step-marker>01</x-wirekit::step-marker>
    <x-wirekit::step-marker>02</x-wirekit::step-marker>
    <x-wirekit::step-marker>03</x-wirekit::step-marker>
</x-wirekit::row>

#Why not a badge

A badge is a pill, and a pill reads as a label about something — a status, a count, a tag attached to a neighbor. A step marker is not about the step; it is the step. The square corners carry that difference, which is why the shape is not configurable.

Two other near-misses, for the same reason: avatar has the right shape but means "a person", and stepper is the whole flow rather than one marker in it.

#Intents

The same color vocabulary as badge and button. Every intent fills the chip and pairs it with that intent's own foreground token, so the number stays legible without a choice on your part.

<x-wirekit::row gap="md" align="center" wrap>
    <x-wirekit::step-marker intent="neutral">01</x-wirekit::step-marker>
    <x-wirekit::step-marker intent="primary">02</x-wirekit::step-marker>
    <x-wirekit::step-marker intent="success">03</x-wirekit::step-marker>
    <x-wirekit::step-marker intent="warning">04</x-wirekit::step-marker>
    <x-wirekit::step-marker intent="danger">05</x-wirekit::step-marker>
</x-wirekit::row>

#Sizes

<x-wirekit::row gap="md" align="center">
    <x-wirekit::step-marker size="sm">01</x-wirekit::step-marker>
    <x-wirekit::step-marker size="md">02</x-wirekit::step-marker>
    <x-wirekit::step-marker size="lg">03</x-wirekit::step-marker>
</x-wirekit::row>

#In a feature list

The shape this component was written for: a numbered sequence where each step carries its own heading and body.

<x-wirekit::feature-grid cols="1">
    <x-wirekit::feature title="Connect your data">
        <x-slot:iconSlot>
            <x-wirekit::step-marker intent="primary">01</x-wirekit::step-marker>
        </x-slot:iconSlot>
        Pull rows from your warehouse — no ETL.
    </x-wirekit::feature>
    <x-wirekit::feature title="Define dashboards">
        <x-slot:iconSlot>
            <x-wirekit::step-marker intent="primary">02</x-wirekit::step-marker>
        </x-slot:iconSlot>
        Compose KPI cards from the stat and ticker primitives.
    </x-wirekit::feature>
</x-wirekit::feature-grid>

#Props

Defaults come from config/wirekit.php under components.step-marker.

#Accessibility

The marker carries no ARIA role, and that is deliberate. It repeats a fact the step's own heading already states — its number and its position. Given a role it would announce that fact a second time, and a screen-reader user would hear "01" before every heading with no way to tell that it adds nothing.

Keep the number in the marker and the meaning in the heading beside it. If a sequence has no heading to carry the meaning, the marker is not what is missing — the heading is.

#Keyboard Interaction

None. The marker is not focusable and takes no input — it is a printed number, and there is nothing about it to operate.

That is the correct shape rather than an omission: making it focusable would put a tab stop in front of every step whose only reward is hearing the number a second time.

#Design Tokens

#Further Reading

• Badge — the pill-shaped label for statuses and counts
• Stepper — the full multi-step flow indicator
• Feature Grid — the layout the example above uses