Workflow glyph

import WorkflowGlyph from "@/components/WorkflowGlyph";

WorkflowGlyph draws the same path as the Workflows item in the menu bar, as an inline SVG filled with currentColor. Put it next to a workflow's name wherever the product refers to a workflow, so a workflow is marked the same way as the page it lives on.

SizesCopy Anchor Link

size sets the width and height in pixels. The default is 14. The product uses 13px in a 12px link and 14px in a 12px list row.

<WorkflowGlyph size={12} />
<WorkflowGlyph size={13} />
<WorkflowGlyph />
<WorkflowGlyph size={16} />
<WorkflowGlyph size={20} />

In a linkCopy Anchor Link

The glyph has no colour of its own. Inside a link it takes the link's colour: here --color-primary-600, as on the Recommendations page, where the link names the workflow a recommendation came from and opens it.

<button type="button" onClick={onOpenWorkflow} className="rec-card-link">
  <WorkflowGlyph size={13} />
  {workflow.name}
</button>

In a rowCopy Anchor Link

To make it quieter than the text beside it, give it a colour class. The Assessment page lists workflows with a muted glyph (--text-muted, #8E93AF) before each name.

<button type="button" className="flex items-center gap-2.5 …">
  <WorkflowGlyph size={14} className="shrink-0 text-[var(--text-muted)]" />
  <span className="flex-1 min-w-0 text-[12px]">{w.name}</span>
  <span className="text-[12px] text-[#757A97]">{w.pending} waiting</span>
  <CaretRight size={13} />
</button>

PropsCopy Anchor Link

No other props are passed through.

AccessibilityCopy Anchor Link

• The SVG has aria-hidden="true", so it is always decorative. Put it only next to text that names the workflow.
• When it sits inside a link or button, that element's text is its accessible name. Do not use the glyph on its own as an icon button.

Do and don'tCopy Anchor Link

• Do use it for references to a workflow: a link to it, a row in a list of workflows, a chip that says which workflow made something.
• Do let it inherit colour. Set a colour class only to make it quieter than its text.
• Don't use a Phosphor icon such as TreeStructure for workflows. This glyph matches the menu bar.
• Don't use it for agents or recommendations. Agents have their agent mark.

Where it is usedCopy Anchor Link

src/pages/workflows/index.jsx imports it but does not render it.