Components

Country cell

The canonical Yuno 'country' cell used inside Table rows (Insights → Top countries, Chargebacks by country, etc.). A 16×16 circular flag next to the country name. Never emoji — Yuno standardizes on the circle-flags SVG set so flags read at small sizes and match production across the Dashboard. Default flag CDN is hatscripts.github.io/circle-flags (same as prod); pass `baseUrl` to self-host.

Updated Aug 6, 2026 by Leonardo Posada

Anatomy

flex items-center gap-2. Left: a 16×16 <img> loading `{baseUrl}/{code.toLowerCase()}.svg` from the circle-flags set. Right: a plain <span> with the country name. Alt text on the img is empty — the flag is decorative; the name carries the semantic.

Mexico

1
Container
flex items-center gap-2. Sized to fit naturally inside a <TableCell> without extra padding.
2
Flag
16×16 <img> pointing at `{baseUrl}/{code.toLowerCase()}.svg`. Default baseUrl is the public hatscripts.github.io/circle-flags mirror. alt="" because the flag is decorative — the name span carries the semantic.
3
Country name
Plain <span> — inherits the surrounding TableCell text styles (text-sm foreground).

Recipes

Standalone

A single CountryCell out of context. Rare on its own — CountryCell is designed for table rows — but useful for a compact label in a filter chip or a card header.

Mexico

<CountryCell code="MX" name="Mexico" />

Inside a Table (canonical)

Drop CountryCell as the child of a <TableCell> in a Table row. Common right-column pair: a tabular-nums numeric column (payments count, volume) so the country names line up on the left and the numbers align on the right.

Country	Payments
Mexico	2,180,300
Brazil	1,412,800
Colombia	890,500
Chile	672,200
Peru	410,300
United States	162,100

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Country</TableHead>
      <TableHead className="text-right">Payments</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {rows.map((r) => (
      <TableRow key={r.code}>
        <TableCell>
          <CountryCell code={r.code} name={r.name} />
        </TableCell>
        <TableCell className="text-right tabular-nums">
          {r.payments}
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Self-hosted flags (offline / production)

The default CDN (hatscripts.github.io/circle-flags) is fine for prototypes but not for offline or high-availability production. Copy the circle-flags set into your app's public/ folder (or your CDN) and pass `baseUrl` to point CountryCell at it. Do NOT include a trailing slash — the pattern appends `/{code}.svg`.

// Serve your own copy of circle-flags under public/flags/
// and point CountryCell at it via the baseUrl prop. Do NOT include a trailing slash.

<CountryCell code="MX" name="Mexico" baseUrl="/flags" />

// Or override globally by wrapping CountryCell in your own component:
function AppCountryCell(props) {
  return <CountryCell {...props} baseUrl="/flags" />;
}

Import

Copy this import line at the top of the file where you compose this atom.

CountryCell is a controlled display atom — pass `code` + `name` and it renders. No state, no callbacks. Override `baseUrl` for offline / self-hosted flag assets.

import { CountryCell } from "@/components/ui/country-cell";

Props

Everything else from the underlying HTML or Radix primitive is forwarded via ...props.

Prop	Type	Default	Description
code	string (required)	—	ISO 3166-1 alpha-2 country code (case-insensitive). "US", "co", "BR". Interpolated into the flag URL: `{baseUrl}/{code.toLowerCase()}.svg`.
name	string (required)	—	Country name shown next to the flag.
baseUrl	string	hatscripts.github.io/circle-flags/flags	Optional override for the flag CDN base URL. Point at your own copy (e.g. `/flags` served from public/) for offline / self-hosted use. Do NOT include a trailing slash.
className	string	—	Extra classes on the outer flex container.

Cross-links to atoms and patterns you may reach for next.

TableThe canonical host — CountryCell fits inside <TableCell> without extra padding.
Rate cellThe other canonical Table cell atom in the kit (Progress bar + percentage label).
IconographyThe flag is a decorative image (alt=''), not a Phosphor icon. Country flags are an exception to the Phosphor-only rule because Phosphor doesn't ship flags at this fidelity.