FilingStatusCard

Hero example

When to use

Reach for FilingStatusCard when a Filing resource needs a one-glance summary surface — typically inside an agent reply ("Here's where the Delaware annual report stands"), a dashboard inbox row, or a Compliance view's per-jurisdiction column. The card is deliberately read-only: it shows state and a checklist of sub-items but does not expose actions. When the user needs to act, the surrounding wrapper supplies a "File now" or "Open filing" affordance.

Don't reach for FilingStatusCard when you need a multi-filing timeline (use Timeline) or when the filing is a Resolution awaiting signature (use BoardConsentCard). Don't use it for forward-looking work plans either — those belong in PlanCard, which carries a completed cursor instead of done flags per item.

Anatomy

Three structural regions stacked top-to-bottom:

1. Header. Shield icon + filing title + status pill (right-aligned). The pill resolves through STATUS_LABEL and STATUS_TONE from the prop's status value — there are exactly four states and consumers cannot pass arbitrary strings.
2. Meta row. jurisdiction and Due {dueDate} separated by a 3px hairline dot. Mono font, muted color, single line.
3. Checklist block. Bordered container of items[]. Each item: 14px circular checkbox (filled green when done: true, empty when done: false), label (line-through when done), and a right-aligned mono value.

The card surface is .in-chat-card.glass-card — the same Glass container used by every InlineCard.

Props

States

The card surfaces filing state via the status prop. Four canonical values, no extension surface:

The label and tone are deterministic from status; consumers do not override them. If you need a different label, the right move is to add a new FilingStatusKind enum value — not pass a custom string.

Density

In compact, the meta-row gap drops from 12 to 8px and checklist-item vertical padding drops from 10 to 6px. The checkbox stays 14px (legibility floor) and the status pill stays full size.

Themes

In forced-colors, the status-pill background collapses to Highlight, dots to ButtonText, and the checked indicator falls back to system check glyph.

Tokens consumed

Status-pill backgrounds resolve from the --status-{tone}-bg family; the foreground from --status-{tone}-text. The check fill reads --status-green. The checklist container background reads --paper-50 and the border reads --ink-5.

Accessibility

• Keyboard interactions. The card itself has no focusable elements. When wrapped in a list row, the wrapper carries the focus contract.
• ARIA roles and properties. The card is a generic region. The status pill is not a button — it has no role override and its accessible name is its text content.
• Focus order. N/A (no internal focus).
• Screen-reader expectations. Reading order: title, status label (e.g. "Filed"), jurisdiction, "Due {date}", then each checklist item as "checkbox, label, value" — done items announce as "checked" via the visible ✓ glyph.
• Reduced motion. No keyframes in this card.
• Forced colors. Status pill background → Highlight; pill dot → ButtonText. The check glyph is text so it inherits foreground.
• WIG rules. Icons carry aria-hidden="true" (decorative-icon rule). No interactive element claims focus inside the card — actions live on the parent (semantic-element rule).

Do / Don't

Recipes

This card appears in:

• Board recipe — surfaced when a corporate action requires both a consent and a filing.
• Docs corpus recipe — inline when agents report on compliance state.
• Equity recipe — on cap-table-changing filings (409A valuations, etc.).

Code example

import { FilingStatusCard } from "@matter/components";

export function DelawareAnnualReportInline({ filing }: { filing: Filing }) {
  return (
    <FilingStatusCard
      title={filing.title}
      jurisdiction={filing.jurisdiction.display_name}
      dueDate={filing.due_date_display}
      status={filing.status}
      items={filing.checklist.map((c) => ({
        label: c.label,
        value: c.value,
        done: c.state === "complete",
      }))}
    />
  );
}

Source