Recovery Codes

Overview

RecoveryCodesStatus displays a compact indicator of how many recovery codes remain, with color-coded warnings when codes run low. RecoveryCodesList shows the full list of codes with used-code strikethrough, copy/download actions, and a regenerate button. Both support custom labels for i18n.

Usage

import { RecoveryCodesList, RecoveryCodesStatus } from "@leanicon/web-builder-library/saas";

{
  /* Status indicator */
}
<RecoveryCodesStatus remainingCount={6} totalCount={8} />;

{
  /* Full code list */
}
<RecoveryCodesList
  codes={["ABCD-1234", "EFGH-5678", "IJKL-9012"]}
  usedCodes={["ABCD-1234"]}
  onRegenerate={() => handleRegenerate()}
/>;

RecoveryCodesStatus Variants

Full Codes

Half Codes

Low Codes

Very Low Codes

No Codes Remaining

RecoveryCodesList Variants

Codes List

With Used Codes

Half Used

All Used

Regenerating

Read Only

With App Name