APIKeyDisplay

stable

Masked API key display with reveal toggle, copy-to-clipboard, metadata, and revoke action

TrustInteractive/Storybook ↗

import { APIKeyDisplay } from "@nodus/design-system"

Production API Key

nds_live••••••••••••••••••••cA8g

Created: 2026-02-15Expires: 2027-02-15

Loading demo…

Props

Prop	Type	Default	Description
`apiKey`req	`string`	—	The full API key
`label`	`string`	—	Display label
`created`	`string`	—	Creation date
`expires`	`string`	—	Expiry date
`onRevoke`	`() => void`	—	Revoke callback

apiKeyrequired

Type stringDefault —

The full API key

label

Type stringDefault —

Display label

created

Type stringDefault —

Creation date

expires

Type stringDefault —

Expiry date

onRevoke

Type () => voidDefault —

Revoke callback

MobileTouch Target

Copy button must be ≥44px. On mobile, the key string truncates — show only first/last 4 chars with ellipsis. Reveal-key toggle must also meet 44px.

Design Rationale

This component was designed to express:

Multi-step deliberate confirmation for high-stakes actions

Was this helpful?