API key

A secret key shown once, with a copy action, a warning and a way to roll it.

Built withcardalertinput-groupinputcopy-buttonbutton
API key
Default density Compact density Restart from the initial state Show the copyable source

API key

Use this key to authenticate requests from your server.

Copy it now You won't be able to see this key again after you leave this page.
Roll key Done
<tp-card style="inline-size:min(100%, 28rem)"> <h2 slot="header">API key</h2> <p slot="description">Use this key to authenticate requests from your server.</p> <div style="display:grid;gap:var(--tp-space-4)"> <tp-alert severity="warning"> <span slot="title">Copy it now</span> You won't be able to see this key again after you leave this page. </tp-alert> <tp-input-group> <tp-input label="Secret key" readonly default-value="sk_live_4f2c9a81d7e3"></tp-input> <tp-copy-button slot="action" value="sk_live_4f2c9a81d7e3" label="Copy secret key"></tp-copy-button> </tp-input-group> </div> <tp-button slot="footer" variant="outline">Roll key</tp-button> <tp-button slot="footer">Done</tp-button> </tp-card>

How it’s composed

  • Alert explains the one-time reveal in the flow of the card, without interrupting with a dialog.
  • Input group pairs a read-only Input with a Copy button in its action slot; the input keeps the key selectable for people who copy by hand.
  • Button keeps rolling the key secondary to finishing.

Make it yours

Confirm a roll with an Alert dialog, and mask the key after the first copy.

More patterns

Sign in

Email and password sign-in with a remember-me option, a recovery link and a single primary action.

Password recovery

Request a reset link by email, with a quiet description of what happens next and a route back to sign in.

Verify code

A six-digit one-time code, grouped in threes, with a resend action for the email that never arrived.

Notification settings

Grouped switches for email and push notifications, each with a one-line explanation.

Invite teammates

Invite by email with a role picker, above the list of people who already have access.

Choose a plan

Three plans as a radio group, with the price and what each includes, and one action to continue.

Upload progress

A list of files uploading in parallel, each with its own progress and a finished state.

Send feedback

A short rating and an open comment, the two questions that get answered most often.

Schedule a meeting

Pick a day on the calendar and one of the open time slots beside it.

Sound settings

Volume sliders for each channel and a switch for spatial audio.

Profile card

A person, their role and a few numbers, with follow and message actions.