Use ResponseCard for a terminal response to an action or route: a missing meeting, completed sign-out, verification email, or similar status page. It standardizes the centered StatusMark, title, description, details, call to action, and py-10 panel spacing.

Without footer, it renders a standalone Card. Supplying footer adds CardFrame chrome and places the footer in CardFrameFooter. Keep page positioning outside the component; use ContentCenter where the page does not have its own shell.

Copyimport { ResponseCard } from "@coss/ui/shared/response-card";

Example

The first example matches Cal Video responses. The second matches authentication responses that need a secondary footer.

Copy<ContentCenter>
  <ResponseCard
    status="error"
    title={t("no_meeting_found")}
    description={t("no_meeting_found_description")}
    action={<Button size="lg">{t("go_back_home")}</Button>}
  />
</ContentCenter>

Copy<ResponseCard
  status="success"
  title={t("payment_successful")}
  description={t("email_sent_with_activation_link")}
  action={
    <Button
      size="lg"
      render={<a href={gmailUrl} rel="noreferrer" target="_blank" />}
    >
      {t("open_in_gmail")}
      <ExternalLinkIcon aria-hidden="true" />
    </Button>
  }
  footer={<ResendEmail />}
/>

API

Call sites

Example URLs

Not exhaustive — open these locally (for example, http://localhost:3000) to see the component in product.

Source

packages/coss-ui/src/shared/response-card.tsx