API Key Display

Overview

ApiKeyDisplay renders an API key inside a card with a copy button. When no keyValue is provided, the key is masked with bullet characters. The showOnce flag displays an amber warning indicating the key will not be shown again. Copying writes to the clipboard and shows a brief "Copied" confirmation.

Usage

import { ApiKeyDisplay } from "@leanicon/web-builder-library/saas";

<ApiKeyDisplay
  keyPrefix="sk_live_"
  keyValue="sk_live_4xT9mKpQrNbLhWsJdYvFcZeUoAiXgBl"
  onCopy={() => console.log("copied")}
/>;

Variants

Default

Dark

Show Once

Masked