PenTool UIالعربيةBrowse the library

Buttons · Forms

Buttons in Forms: 12 designs — Copy Button with Confirmation · Hold-to-Delete · Icon Buttons with Tooltips · Async Loading Button

All Forms designs

Designs

RTL VerifiedLTR Verified Forms

Copy Button with Confirmation

Actually copies, with a fallback when clipboard permission is unavailable

Intermediate
Code Prompt
RTL VerifiedLTR Verified Forms

Hold-to-Delete

The delete completes after a sustained press and aborts on release

Advanced
Code Prompt
RTL VerifiedLTR Verified Forms

Icon Buttons with Tooltips

Each has an accessible name, and the tooltip shows on focus, not hover alone

Intermediate
Code Prompt
RTL VerifiedLTR Verified Forms

Async Loading Button

Blocks the double click and holds its width while pending

Advanced
Code Prompt
RTL VerifiedLTR Verified Forms

Magnetic Button

Leans toward the pointer within range, and stops when motion is reduced

Advanced
Code Prompt
RTL VerifiedLTR Verified Forms

Progress-in-Button

Progress lives inside the button, and the upload can be cancelled mid-flight

Advanced
Code Prompt
RTL VerifiedLTR Verified Forms

Segmented Control

Single choice with a sliding indicator measured from the active segment

Intermediate
Code Prompt
RTL VerifiedLTR Verified Forms

Expanding Share Buttons

One button expands into options, with a counter that actually increments

Intermediate
Code Prompt
RTL VerifiedLTR Verified Forms

Base Buttons with States

Four levels of emphasis, five states each

Beginner
Code Prompt
RTL VerifiedLTR Verified Forms

Split Button

The default action is one click; its alternatives sit behind an arrow

Advanced
Code Prompt
RTL VerifiedLTR Verified Forms

Quantity Stepper

Respects stock and minimum, recomputing the line total instantly

Advanced
Code Prompt
RTL VerifiedLTR Verified Forms

Toggle Switches

State announced to screen readers, with computed dependency between switches

Intermediate
Code Prompt