Actions and status

<Button variant="primary">Create key</Button>
<Button>Cancel</Button>
<Button variant="ghost">Skip</Button>
<Button variant="link">View docs</Button>
<Button variant="danger">Revoke key</Button>

<div class="g-frame g-frame--row"><button type="button" class="ra-btn ra-btn--primary">Create key</button><button type="button" class="ra-btn">Cancel</button><button type="button" class="ra-btn ra-btn--ghost">Skip</button><button type="button" class="ra-btn ra-btn--link">View docs</button><button type="button" class="ra-btn ra-btn--danger">Revoke key</button></div>

<Button size="sm">Small</Button>
<Button>Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra large</Button>

<div class="g-frame g-frame--row"><button type="button" class="ra-btn ra-btn--sm">Small</button><button type="button" class="ra-btn">Medium</button><button type="button" class="ra-btn ra-btn--lg">Large</button><button type="button" class="ra-btn ra-btn--xl">Extra large</button></div>

<Button variant="primary" icon={<Plus />}>New run</Button>
<Button iconEnd={<Arrow />}>Open usage</Button>
<IconButton label="Add agent" icon={<Plus />} />

<div class="g-frame g-frame--row"><button type="button" class="ra-btn ra-btn--primary"><svg class="ra-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>New run</button><button type="button" class="ra-btn">Open usage<svg class="ra-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"></path><path d="m13 6 6 6-6 6"></path></svg></button><button type="button" class="ra-btn ra-btn--ghost ra-btn--icon ra-tip" aria-label="Add agent" data-tip="Add agent"><svg class="ra-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></button></div>

<Button disabled>Disabled</Button>
<Button variant="primary" loading>Saving</Button>
<Button href="/keys" disabled>Disabled link</Button>

<div class="g-frame g-frame--row"><button type="button" class="ra-btn" disabled="">Disabled</button><button type="button" class="ra-btn ra-btn--primary" disabled="" aria-busy="true"><span class="ra-btn__spinner" aria-hidden="true"></span>Saving</button><a class="ra-btn" aria-disabled="true">Disabled link</a></div>

<Button tone="dark">Reveal</Button>
<Button tone="dark" variant="ghost">Cursor</Button>

<div class="g-frame g-frame--row" style="background:var(--ra-code-bg);padding:16px;border-radius:8px"><button type="button" class="ra-btn ra-btn--dark">Reveal</button><button type="button" class="ra-btn ra-btn--ghost ra-btn--dark">Cursor</button></div>

<Button variant="primary" size="xl" slide>Get your API key</Button>
<Button size="xl" slide>Read the docs</Button>

<div class="g-frame g-frame--row"><button type="button" class="ra-btn ra-btn--primary ra-btn--xl ra-btn--slide">Get your API key</button><button type="button" class="ra-btn ra-btn--xl ra-btn--slide">Read the docs</button></div>

<Button as="a" href="/keys" variant="primary">Create key</Button>

<a class="ra-btn ra-btn--primary" href="/keys">Create key</a>

<Pill>Live</Pill>
<Pill tone="ok">200 OK</Pill>
<Pill tone="warn">Low balance</Pill>
<Pill tone="err">504</Pill>
<Pill tone="brand">Starter</Pill>
<Pill tone="pass">Enrichment Pass</Pill>

<div class="g-frame g-frame--row"><span class="ra-pill">Live</span><span class="ra-pill ra-pill--ok">200 OK</span><span class="ra-pill ra-pill--warn">Low balance</span><span class="ra-pill ra-pill--err">504</span><span class="ra-pill ra-pill--brand">Starter</span><span class="ra-pill ra-pill--pass">Enrichment Pass</span></div>

<Pill mono>GET</Pill>

<span class="ra-pill ra-pill--mono">GET</span>

<Chip>run_8f2a</Chip>
<Chip>person.email</Chip>

<div class="g-frame g-frame--row"><span class="ra-chip">run_8f2a</span><span class="ra-chip">person.email</span></div>

<Kbd>⌘K</Kbd>
<Kbd>⌘J</Kbd>
<Kbd>Esc</Kbd>

<div class="g-frame g-frame--row"><kbd class="ra-kbd">⌘K</kbd><kbd class="ra-kbd">⌘J</kbd><kbd class="ra-kbd">Esc</kbd></div>

<Dot />
<Dot tone="ok" />
<Dot tone="warn" />
<Dot tone="err" />
<Dot tone="brand" />
<Dot tone="pass" />
<Dot tone="ok" pulse label="Healthy" />

<div class="g-frame g-frame--row"><span class="ra-dot" aria-hidden="true"></span><span class="ra-dot ra-dot--ok" aria-hidden="true"></span><span class="ra-dot ra-dot--warn" aria-hidden="true"></span><span class="ra-dot ra-dot--err" aria-hidden="true"></span><span class="ra-dot ra-dot--brand" aria-hidden="true"></span><span class="ra-dot ra-dot--pass" aria-hidden="true"></span><span class="ra-dot ra-dot--ok ra-dot--pulse" role="img" aria-label="Healthy"></span></div>

<Avatar name="Acme Growth" size="sm" />
<Avatar name="Acme Growth" />
<Avatar name="Acme Growth" size="lg" />
<Avatar name="RichAPI" src="../dist/assets/logos/richapi-icon-color-blue.svg" />

<link rel="preload" as="image" href="../dist/assets/logos/richapi-icon-color-blue.svg"/><div class="g-frame g-frame--row"><span class="ra-avatar ra-avatar--sm" role="img" aria-label="Acme Growth">AG</span><span class="ra-avatar" role="img" aria-label="Acme Growth">AG</span><span class="ra-avatar ra-avatar--lg" role="img" aria-label="Acme Growth">AG</span><img class="ra-avatar" src="../dist/assets/logos/richapi-icon-color-blue.svg" alt="RichAPI"/></div>

<Card>
  <CardHeader title="Recent runs" description="Last 30 days" actions={<Button variant="ghost">View all</Button>} />
  <CardBody>1,284 runs used 3,920 credits across 6 agents.</CardBody>
</Card>

<div class="g-frame g-frame--md"><div class="ra-card"><div class="ra-card__head"><div><h3 class="ra-card__title">Recent runs</h3><p class="ra-card__desc">Last 30 days</p></div><div class="ra-card__actions"><button type="button" class="ra-btn ra-btn--ghost">View all</button></div></div><div class="ra-card__body">1,284 runs used 3,920 credits across 6 agents.</div></div></div>

<Card interactive>
  <CardBody>Enrichment Pass. Hover to see the border change.</CardBody>
</Card>

<div class="g-frame g-frame--md"><div class="ra-card ra-card--interactive"><div class="ra-card__body">Enrichment Pass. Hover to see the border change.</div></div></div>

<Card>
  <CardHeader title="API keys" />
  <CardBody>Keys are shown once, when you create them.</CardBody>
  <CardFooter>Updated 2 hours ago</CardFooter>
</Card>

<div class="g-frame g-frame--md"><div class="ra-card"><div class="ra-card__head"><div><h3 class="ra-card__title">API keys</h3></div></div><div class="ra-card__body">Keys are shown once, when you create them.</div><div class="ra-card__foot">Updated 2 hours ago</div></div></div>

<Stat label="Credits left" value="1,284" unit="credits" delta={{ value: "12%", direction: "down" }} foot="Resets Nov 1" />

<div class="g-frame g-frame--sm"><div class="ra-stat"><div class="ra-stat__label ra-label">Credits left</div><div class="ra-stat__big"><b class="ra-stat__value">1,284</b><span class="ra-stat__unit">credits</span><span class="ra-stat__delta ra-stat__delta--bad"><span aria-hidden="true">↓</span> 12%<span class="ra-sr-only"> down, worse</span></span></div><div class="ra-stat__foot">Resets Nov 1</div></div></div>

<Stat label="Calls this week" value="2,384" href="/usage" foot="Open usage" />
<Stat label="Credits" value="1,248.5" help="Every endpoint has a fixed credit price, per call or per result. Misses on pay-per-hit endpoints and failed calls cost nothing. Prices are in Billing." foot="Wallet" />

<div class="g-frame g-frame--sm g-frame--stack"><a class="ra-stat ra-stat--link" href="/usage"><div class="ra-stat__label ra-label">Calls this week</div><div class="ra-stat__big"><b class="ra-stat__value">2,384</b></div><div class="ra-stat__foot">Open usage</div></a><div class="ra-stat"><div class="ra-stat__label ra-label">Credits<button type="button" class="ra-stat__help ra-tip" data-tip="Every endpoint has a fixed credit price, per call or per result. Misses on pay-per-hit endpoints and failed calls cost nothing. Prices are in Billing." aria-label="Every endpoint has a fixed credit price, per call or per result. Misses on pay-per-hit endpoints and failed calls cost nothing. Prices are in Billing.">?</button></div><div class="ra-stat__big"><b class="ra-stat__value">1,248.5</b></div><div class="ra-stat__foot">Wallet</div></div></div>

<Stat label="Credits used" value="716" unit="of 2,000" foot="Resets Nov 1">
  <Meter value={716} max={2000} label="Credits used this month" />
</Stat>

<div class="g-frame g-frame--sm"><div class="ra-stat"><div class="ra-stat__label ra-label">Credits used</div><div class="ra-stat__big"><b class="ra-stat__value">716</b><span class="ra-stat__unit">of 2,000</span></div><div class="ra-meter" role="meter" aria-label="Credits used this month" aria-valuemin="0" aria-valuemax="2000" aria-valuenow="716"><i class="ra-meter__fill" style="width:35.8%"></i></div><div class="ra-stat__foot">Resets Nov 1</div></div></div>

<Card>
  <Stat label="Runs" value="1,284" delta={{ value: "8%", direction: "up" }} foot="Last 30 days" />
  <Stat label="Credits used" value="3,920" unit="credits" foot="Across 6 agents" />
  <Stat label="Errors" value="3" delta={{ value: "40%", direction: "down", good: true }} foot="Last 7 days" />
</Card>

<div class="ra-card"><div class="g-frame g-frame--stack" style="grid-template-columns:repeat(3, 1fr);gap:0"><div class="ra-stat"><div class="ra-stat__label ra-label">Runs</div><div class="ra-stat__big"><b class="ra-stat__value">1,284</b><span class="ra-stat__delta ra-stat__delta--good"><span aria-hidden="true">↑</span> 8%<span class="ra-sr-only"> up, better</span></span></div><div class="ra-stat__foot">Last 30 days</div></div><div class="ra-stat"><div class="ra-stat__label ra-label">Credits used</div><div class="ra-stat__big"><b class="ra-stat__value">3,920</b><span class="ra-stat__unit">credits</span></div><div class="ra-stat__foot">Across 6 agents</div></div><div class="ra-stat"><div class="ra-stat__label ra-label">Errors</div><div class="ra-stat__big"><b class="ra-stat__value">3</b><span class="ra-stat__delta ra-stat__delta--good"><span aria-hidden="true">↓</span> 40%<span class="ra-sr-only"> down, better</span></span></div><div class="ra-stat__foot">Last 7 days</div></div></div></div>

<Meter value={40} label="Brand" />
<Meter value={30} tone="ok" label="Ok" />
<Meter value={75} tone="warn" label="Warn" />
<Meter value={95} tone="err" label="Err" />
<Meter value={60} tone="pass" label="Pass" />

<div class="g-frame g-frame--sm g-frame--stack"><div class="ra-meter" role="meter" aria-label="Brand" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40"><i class="ra-meter__fill" style="width:40%"></i></div><div class="ra-meter ra-meter--ok" role="meter" aria-label="Ok" aria-valuemin="0" aria-valuemax="100" aria-valuenow="30"><i class="ra-meter__fill" style="width:30%"></i></div><div class="ra-meter ra-meter--warn" role="meter" aria-label="Warn" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75"><i class="ra-meter__fill" style="width:75%"></i></div><div class="ra-meter ra-meter--err" role="meter" aria-label="Err" aria-valuemin="0" aria-valuemax="100" aria-valuenow="95"><i class="ra-meter__fill" style="width:95%"></i></div><div class="ra-meter ra-meter--pass" role="meter" aria-label="Pass" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60"><i class="ra-meter__fill" style="width:60%"></i></div></div>

<AvatarGroup max={2} people={[
  { name: "Sakshi" },
  { name: "Vikesh" },
  { name: "Lena Hartmann" },
  { name: "Ana Ruiz" },
  { name: "Tom Berg" },
]} />

<div class="ra-avatar-group" role="group" aria-label="Sakshi, Vikesh, Lena Hartmann, Ana Ruiz, Tom Berg"><span class="ra-avatar" role="img" aria-label="Sakshi">S</span><span class="ra-avatar" role="img" aria-label="Vikesh">V</span><span class="ra-avatar ra-avatar-group__more" role="img" aria-label="3 more">+3</span></div>