Content · 10 of 13

ProjectChip

The smallest component in the system and the only pure-Astro one in this storybook: no script block, no props, one slot.

Astro src/components/project/project-chip.astro slot-only

API

The entire component is a single <div> with a <slot /> and an empty frontmatter fence. There are no props, so there is no props table — content and any icon come through the slot.

Full source. <div class="flex gap-2 items-center w-fit border border-surface-quaternary bg-surface-secondary px-6 py-3 rounded-custom text-body-primary"><slot /></div>

Stories

Autodesk Revit

Text only <ProjectChip>Autodesk Revit</ProjectChip> 2.75rem radius on a 3rem-tall box — effectively a pill.

.NET 8

With icon slot = icon + label The gap-2 exists for exactly this — the component assumes an icon may lead.

Revit Navisworks Azure

In a row the usual usage w-fit means each chip sizes to content; the parent owns the wrapping.

Findings

It is a chip that cannot be interactive. A <div> with no href, no click handler and no variants. If a filter or tag-link is ever needed, this component cannot become one without a rewrite — which is the correct trade for a display-only element, but worth stating so nobody reaches for it as a button.

It is the clearest use of --radius-custom. 2.75rem on a short box reads as a pill; the same token on the Radio secondary card reads as a rounded rectangle. One token, two very different impressions — driven by the height it is applied to.