# Entity Chip

> Inline reference to a client, person or record, as a monogram and name.

- **Slug:** `entity-chip`
- **Kind:** atom · **Category:** Content
- **Source:** ported from [Beautiful UI](https://github.com/slev12397/beautiful-ui/blob/main/components/atoms/EntityChip.tsx) (MIT)
- **Docs page:** https://viewership.ai/ui/components/entity-chip
- **All files in one bundle:** https://viewership.ai/ui/components/entity-chip.bundle.txt
- **Structured JSON:** https://viewership.ai/ui/components/entity-chip.json

## Install

1. Import the foundation tokens once (download: https://viewership.ai/ui/raw/foundation.css.txt):

```astro
---
// src/layouts/Layout.astro
import "../styles/foundation.css";
---
```

2. Copy these files into `src/components/viewership/entity-chip/`:

   - `EntityChip.astro` (raw: https://viewership.ai/ui/raw/entity-chip/EntityChip.astro.txt)
   - `Monogram.astro` (raw: https://viewership.ai/ui/raw/entity-chip/Monogram.astro.txt)

npm packages: none.

## Usage

```astro
---
import EntityChip from "../components/viewership/entity-chip/EntityChip.astro";
---

<EntityChip />
```

## Example

The gallery demo, verbatim. Use the import path from Usage instead of `./`.

```astro
---
import EntityChip from "./EntityChip.astro";
import Monogram from "./Monogram.astro";
---

<div class="card">
  <div class="head">
    <Monogram color="var(--vs-ink)" class="mark">N</Monogram>
    <span class="title">Weekly marketing note</span>
  </div>
  <p>
    Send the spring trail draft to <EntityChip name="Northwind Outdoor" color="var(--vs-green)" />
    before the review window closes, and hold two posts for <EntityChip name="Gear Review Weekly" color="var(--vs-accent)" />.
  </p>
  <p>
    <EntityChip name="Ines Varga" color="var(--vs-orange)" monogram="IV" /> signed off the Q3 citation report;
    the GA4 export from <EntityChip name="Summit Analytics" color="var(--vs-red)" /> is still pending.
  </p>
</div>

<style>
  .card {
    max-width: 440px;
    margin: 0 auto;
    padding: 16px 18px;
    border-radius: var(--vs-radius-card);
    background: var(--vs-surface);
    box-shadow: var(--vs-shadow-card);
  }
  .head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .head :global(.mark) {
    width: 20px;
    height: 20px;
    font-size: 10px;
    color: var(--vs-ink-inverse);
  }
  .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--vs-ink);
  }
  p {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--vs-ink-2);
  }
  p + p {
    margin-top: 8px;
  }
</style>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` |  | Name shown in the chip. |
| `color` | `string` | `"var(--vs-orange)"` | Disc color (any CSS color). |
| `monogram` | `string` |  | Monogram glyph. Defaults to the first letter of name. |
| `<Monogram color>` | `slot + color` |  | Monogram.astro alone: a 16px decorative disc. |

## Used by

[Recommendation Card](https://viewership.ai/ui/components/recommendation-card.md)

## Source

### `src/components/viewership/entity-chip/EntityChip.astro`

```astro
---
/**
 * EntityChip: inline reference to a person, brand or record, as a monogram and name.
 *
 * Ported from Beautiful UI `components/atoms/EntityChip.tsx`
 * (MIT, © 2026 Shane Levine). Softer than a StatusPill (no dot, no state) and not a mono
 * token (see Chip).
 *
 * @example
 * Cited by <EntityChip name="Northwind Outdoor" color="var(--vs-green)" />
 */
import type { HTMLAttributes } from "astro/types";
import Monogram from "./Monogram.astro";

type Props = HTMLAttributes<"span"> & {
  /** Entity name (the chip's text). */
  name: string;
  /** Monogram color. Any CSS color. */
  color?: string;
  /** Monogram glyph. Defaults to the first character of `name`. */
  monogram?: string;
};

const { name, color, monogram, class: className, ...rest } = Astro.props;
---

<span class:list={["vs-entity-chip", className]} {...rest}>
  <Monogram color={color}>{monogram ?? name.charAt(0)}</Monogram>
  <span class="vs-entity-chip__name">{name}</span>
</span>

<style>
  .vs-entity-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 2px;
    padding: 1px 6px 1px 3px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-field);
    box-shadow: var(--vs-shadow-hairline);
    vertical-align: middle;
  }
  .vs-entity-chip__name {
    font-size: 12px;
    font-weight: 500;
    color: var(--vs-ink);
  }
</style>
```

### `src/components/viewership/entity-chip/Monogram.astro`

```astro
---
/**
 * Monogram: a colored disc with an initial or short glyph.
 *
 * Ported from Beautiful UI `components/atoms/EntityChip.tsx`
 * (MIT, © 2026 Shane Levine). Hidden from assistive tech, so pair it with
 * the name.
 *
 * @example
 * <Monogram color="var(--vs-green)">K</Monogram>
 */
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"span"> & {
  /** Disc color. Any CSS color. */
  color?: string;
};

const { color = "var(--vs-orange)", class: className, ...rest } = Astro.props;
---

<span class:list={["vs-monogram", className]} style={`--vs-monogram-color: ${color}`} aria-hidden="true" {...rest}><slot /></span>

<style>
  .vs-monogram {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--vs-radius-pill);
    background: var(--vs-monogram-color);
    color: white;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
  }
</style>
```