Components / Trace

Trace

An ordered execution timeline with explicit complete, running, error and pending states.

Completed successfully

Running now

Waiting for deployment

example.component.html

html

<aevko-trace label="Deployment trace">
  <aevko-trace-item state="complete">
    <strong aevkoTraceTitle>
      Build
    </strong>
    Completed
  </aevko-trace-item>
  <aevko-trace-item state="running">
    <strong aevkoTraceTitle>
      Deploy
    </strong>
    Running
  </aevko-trace-item>
</aevko-trace>

Installation

npx aevko-ui@latest add trace --yes

Source ownership

Customization

Edit marker and connector treatments locally, project rich titles or links and keep execution state bound to real application data.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`label`	`string`	`'Event trace'`	Accessible name for the ordered timeline.
`state`	`'complete' \| 'running' \| 'error' \| 'pending'`	`'complete'`	Visual execution state for each item.
`aevkoTraceTitle`	`projected slot`	`empty`	Step title or native interactive trigger.
`aevkoTraceTime`	`projected slot`	`empty`	Time or duration metadata.

Accessibility contract

Accessibility

Included behavior

The ordered list communicates sequence while status meaning remains available as projected text, not color alone.

Your responsibility

Include visible state text for running, failed or pending steps because marker color and animation are only supporting cues.

Back to all components