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: a simplified monochrome glyph on 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>

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

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.

Takes	Default	Sets
`Ref<IconSize>`	`var(--icon-base)`	The glyph's width and height.
`Paint`	`var(--provider-mark-ink`	The glyph's ink. A container that tints its glyphs sets `--provider-mark-ink` instead (a ListRow's leading slot and a menu item do).
`Paint`	`transparent`	The tile's fill (`tile`).
`Ref<IconSize \| Control>`	`var(--provider-mark-size)`	The tile's side (`tile`; bare, the glyph's size).
`Ref<Radius> \| "0px"`	`0px`	The tile's corner radius.

Usage

Examples

Tile

Matrix

Contrast

Customising

Accessibility

API reference

ProviderMark