Tag

A tag names a technology, platform or standard in mono type, such as AWS, BDO or Claude. Text in muted on a border outline, radius-sm.

A row of tagsDark · Grafite

A row of tagsLight · Gelo

Usage

Do

Give one short technical name per tag.
Use tags in rows: on cards and in the hero strip, in a list (mb-tag-list).

Don't

Make tags clickable: they are labels, not buttons.
Color tags by meaning or put sentences in them.
Use tags for status: use a Notice.

Astro

---
import Tag from '@monk-business/astro/Tag.astro';
---

<ul class="mb-tag-list" role="list">
  <Tag as="li">AWS</Tag>
  <Tag as="li">BDO</Tag>
  <Tag as="li">STIR/SHAKEN</Tag>
</ul>

HTML

<ul class="mb-tag-list" role="list">
  <li class="mb-tag">AWS</li>
  <li class="mb-tag">BDO</li>
  <li class="mb-tag">STIR/SHAKEN</li>
</ul>

Props

Tag props · also accepts the attributes of `<span>`
Prop	Type	Default	Description
`as`	`'span'`\| `'li'`	`'span'`	Element to render: `li` inside a tag list (`<ul class="mb-tag-list">`), `span` elsewhere.

* required.