Artifact Card

Implementation
ArtifactCard API

Common Examples

Basic Usage

Render an artifact trigger with a title and description:

import { ArtifactCard } from "@servicetitan/anvil2-ext-atlas";

function ArtifactTrigger() {
  return (
    <ArtifactCard
      title="Insights for Invoice #10492"
      description="Single-visit industrial install, closed under quote with a 40% margin."
      artifactId="insight-1"
      onClick={() => openPanel("insight-1")}
    />
  );
}

Active State

Pass active while the corresponding ArtifactPanel is open so the card shows the elevated visual state:

import { ArtifactCard } from "@servicetitan/anvil2-ext-atlas";

function ActiveTrigger({ openId, onOpen }) {
  return (
    <ArtifactCard
      title="Customer note draft"
      description="Plain-language summary of the variance."
      artifactId="insight-2"
      active={openId === "insight-2"}
      onClick={() => onOpen("insight-2")}
    />
  );
}

Pairing with ArtifactPanel

Wire the card’s onClick to the consumer state that drives an ArtifactPanel:

import { useState } from "react";
import { ArtifactCard, ArtifactPanel } from "@servicetitan/anvil2-ext-atlas";

function ChatWithArtifact() {
  const [activeId, setActiveId] = useState<string | null>(null);
  return (
    <>
      <ArtifactCard
        title="Insights for Invoice #10492"
        description="Single-visit industrial install."
        artifactId="insight-1"
        active={activeId === "insight-1"}
        onClick={() => setActiveId("insight-1")}
      />
      <ArtifactPanel
        isOpen={activeId !== null}
        onOpenChange={(open) => {
          if (!open) setActiveId(null);
        }}
        title="Insight details"
        triggerKey={activeId ?? undefined}
      >
        {/* artifact content */}
      </ArtifactPanel>
    </>
  );
}

React Accessibility

The card renders as a role="group" wrapping an interactive button via Anvil2’s InteractiveCard. The whole surface is clickable.
The title is used for both the wrapper’s aria-label and the action button’s aria-label (prefixed with “View ”).
artifactId is emitted as data-artifact-id for analytics and event wiring; it is not announced to assistive technology.

<ArtifactCard
  title="Insights for Invoice #10492"
  description="Single-visit industrial install."
  artifactId="insight-1"
  active={false}
  onClick={handleClick}
/>

`ArtifactCard` Props

description

string

required

Supplementary description shown beneath the title.

onClick

() => void

required

Called when the card is activated. Consumers typically open the corresponding ArtifactPanel here.

title

string

required

Bold heading rendered inside the card.

active

boolean

default:"false"

When true, the card shows the active visual state. Set when the corresponding ArtifactPanel is open.

artifactId

string

Identifier for the artifact this card references. Emitted as a data-artifact-id attribute for analytics and event handling.

Atlas

Artifact Card – Code

Common Examples

Basic Usage

Active State

Pairing with ArtifactPanel

React Accessibility

`ArtifactCard` Props

​Common Examples

​Basic Usage

​Active State

​Pairing with ArtifactPanel

​React Accessibility

​ArtifactCard Props

Common Examples

Basic Usage

Active State

Pairing with ArtifactPanel

React Accessibility

`ArtifactCard` Props