Provider mark | Arcadia Design

Try it

import { useState } from "react";
import {
  Menu, MenuContent, MenuRadioGroup, MenuRadioItem, MenuTrigger, PickerTrigger,
  ProviderMark,
} from "@arcadia/ui";

function ModelPicker() {
  const [model, setModel] = useState("large");
  const current = MODELS.find((m) => m.id === model)!;
  return (
    <Menu>
      <MenuTrigger render={<PickerTrigger label={current.label} shape="pill" />} />
      <MenuContent width={240}>
        <MenuRadioGroup label="Models" value={model} onValueChange={(v) => setModel(String(v))}>
          {MODELS.map((m) => (
            <MenuRadioItem
              key={m.id}
              value={m.id}
              icon={<ProviderMark provider={m.provider} />}
              description={m.context}
            >
              {m.label}
            </MenuRadioItem>
          ))}
        </MenuRadioGroup>
      </MenuContent>
    </Menu>
  );
}

TSX

import { ProviderMark } from "@arcadia/ui";

<ProviderMark provider="openai" label="OpenAI" />

Provider marks for model pickers and provider lists, and for the apps and connectors listed beside them (Gmail): a simplified monochrome glyph. Beside a label (text, the default) its own drawing stands as tall as the letters, 1.09 cap heights as a line icon's does (1.00 for a mark with a flat top and bottom), and a wide mark runs at most 1.3 times that 1.09 wide; standalone it takes the icon scale (sm 12, md 14, lg 16), drawn in the same 20-of-24 live area as the kit's icons so it sits level with them. It is drawn in the icon ranks (--provider-mark-color, icon-2), never the brand's colour and never the beacon: a provider is a fact about a model, not a light.

In a ListRow or a menu row it takes the slot's icon rank, so a highlighted row lights it. The marks are their owners' trademarks, used only to say whose model it is.

A provider that arrives as data, such as a server's vendor field, goes through isProviderName(value) first: a provider the kit has no mark for gets no mark rather than an empty one.

Examples

Tile

tile sets the glyph on a small squircle in --fill-3 (20, 24 or 28, the Avatar's sizes) with continuous corners where the browser has them: the app icon in miniature, for rows that introduce a provider.

OpenAIhttps://api.example.com/v1

import { ProviderMark } from "@arcadia/ui";

<div {...sx("cmp-provider-row", cmp.providerRow)}>
  <ProviderMark provider="openai" tile size="lg" />
  <span {...sx("cmp-provider-text", cmp.providerText)}>
    <span {...sx("cmp-provider-name", cmp.providerName)}>OpenAI</span>
    <span {...sx("cmp-provider-url", cmp.providerUrl)}>https://api.example.com/v1</span>
  </span>
</div>

Size and provider

MetaMeta on a tileOpenAIOpenAI on a tileDevinDevin on a tileXiaomiXiaomi on a tileZ.aiZ.ai on a tileOpenCodeOpenCode on a tileGrokGrok on a tileDeepSeekDeepSeek on a tileKimiKimi on a tileGoogleGoogle on a tileAnthropicAnthropic on a tileSpaceXSISpaceXSI on a tileCognitionCognition on a tileMoonshot AIMoonshot AI on a tileCommand CodeCommand Code on a tileGmailGmail on a tileSmall

Medium

Large

Text

Contrast

The glyph measured live over each surface, and over the tile on that surface (WCAG 2; graphics need 3:1).

Night

GlyphTile--bg-app--bg-sidebar--bg-raised--bg-elevated--bg-inset

Day

GlyphTile--bg-app--bg-sidebar--bg-raised--bg-elevated--bg-inset

The tightest pair is icon-2 on the --fill-3 tile over the light sidebar, still above 5:1.

rootStyle takes layout and these knobs. A container that tints its glyphs sets --provider-mark-ink instead, which every mark inside it takes: a ListRow's leading slot and a menu item hand down their icon rank that way.

--provider-mark-size: Ref<IconSize>Default var(--icon-xs); A standalone glyph's width and height (sm, md and lg set it).
--provider-mark-column: Ref<IconSize>; Beside text, the frame's least width (rows: --icon-md).
--provider-mark-color: PaintDefault var(--provider-mark-ink, var(--icon-2)); The glyph's ink; a tinting container sets --provider-mark-ink instead.
--provider-mark-tile: PaintDefault transparent; The tile's fill (tile).
--provider-mark-box: Ref<IconSize | Control>Default var(--_provider-mark-size); The tile's side (tile; bare, the glyph's size).
--provider-mark-radius: Ref<Radius> | "0px"Default 0px; The tile's corner radius.

Decorative unless given a label, which makes it an img named "OpenAI". Omit the label where the provider's name is in the text beside it; in a picker, the model name usually says enough. Under forced colours the glyph follows CanvasText and a tile keeps a 1px outline.

ProviderMark

providerrequired: "meta" | "openai" | "devin" | "xiaomi" | "zai" | "opencode" | "grok" | "deepseek" | "kimi" | "google" | "anthropic" | "spacexsi" | "cognition" | "moonshot" | "commandcode" | "cursor" | "gmail"; Whose models these are.
size: "sm" | "md" | "lg" | "text"Default "text"; text: beside a label, the drawing as tall as its letters (1.09 cap heights; a flat mark 1.00), at most 1.3 line-icon heights wide, centred on its capitals. sm 12px, md 14px, lg 16px: standalone. A tile wraps it in 20 / 24 / 28.
tile: booleanDefault false; Set the glyph on a small continuous-corner squircle in a fill rank, like the app icon.
label: string; Accessible name ("OpenAI"). Omit when the provider's name is already in the text beside it.
rootStyle: RootStyle<ProviderMarkKnobs>; Typed StyleX override: layout and the --provider-mark-* knobs.

Rest props go to <span> props and render.

Usage

Examples

Tile

Matrix

Contrast

Customising

Accessibility

API reference

ProviderMark