TypeUI logoTypeUI

Micro Interactions

Explore 113 interactive UI micro interactions for buttons, forms, selection controls, modals, navigation, and more. Preview each behavior and copy its implementation prompt with TypeUI Creative.

Buttons

Explore button micro interactions for confirmations, undo actions, copy feedback, loading states, and upload progress. Try each example and copy its implementation prompt.

Explore all

Press

Denied action shake

Toggle reaction state

Workspace

Light appearance

Switch the preview theme

Swap state icon

Choose an option

Reveal secondary actions

Hold to confirm

Fluid action button

Copy feedback

Confirm reveal

Action slide-out

Roll reveal

Wall reveal

Slide-off reveal

Loading

State morph

Refresh spin

Sample is ready.

Undo countdown

Bounce dots

Dual ring

Bar wave

Count ramp

Fill sweep

Upload progress

Multi-file upload

Slide bar

Shimmer

Inputs

Explore input micro interactions for password visibility, autosave, validation, formatting, character counts, and suggestions. Build forms that help users enter and correct information.

Explore all

Adornments

Reveal toggle

Copy confirm

Prefix reveal

Suffix fade

Autosaves in this tab

Confirm delayed state

  • Design system
1 project found

Clear to show all projects

Clear fade

Focus

Verification code

Type or paste four digits

Segment fill

Typing

Auto-grow

0/80

Counter tick

0 of 60 characters used

Ring drain

Strength fill

0 words

Count spring

designmotion
Press Enter to add a topic.

Chip pop-in

Toolbar reveal

Digit grouping

Mask fill

/blog/your-post-title

Build derived value

Filter triggered suggestions

Validation & Error

At least 3 characters.

Inline validation

Check the email address

Invalid submit shake

Did you mean gmail.com?

Offer inline correction

Confirm matching values

Toggle Caps Lock to try

Reveal modifier warning

Selection

Explore checkbox, toggle, and radio micro interactions that reveal settings, update totals, filter results, and enable actions. Preview how each choice changes the interface.

Explore all

Checkbox

Select items to begin

Reveal contextual actions

Total 100

Recalculate derived value

0 selected

Select-all cascade

Animate completed item

3 results

  • NotesText
  • CoverImages
  • BriefText

Filter chips

Release notes

Draft

Review before publishing

Enable dependent action

0 of 3 complete

Update derived progress

0 selected · minimum 2

Enforce selection threshold

Selected: Email

Update selection summary

Reveal dependent content

Toggle

Your sample text

Icon toggle group

Show route
Route hidden

Toggle visual layer

Compact rows
Item 1
Item 2
Item 3

Change display density

Quiet hours

Reveal dependent settings

Auto-renew

  1. Now

    Access is active

Swap dependent timeline

Hide preview

Your sample content

Update masked preview

Radio

3 days0 credits

Update linked values

FirstItem
Second
Third
Item in First destination

Move shared item

Swap dependent controls

ReadAllowed
EditNot allowed
ManageNot allowed

Update option matrix

  1. Step 1
  2. Step 2

Rebuild dependent steps

Modals

Explore modal micro interactions for confirmation, validation, drag dismissal, and unsaved changes. Help users complete focused tasks while preserving their work and keyboard focus.

Explore all

Drag down to dismiss

Backdrop-click nudge

Error shake

Confirm completed action

Gate exact-match action

Hold to trigger action

Block unsafe dismissal

Drawers

Explore drawer and bottom-sheet micro interactions for edge gestures, linked backdrops, and expanding panels. Try pointer controls and keyboard alternatives.

Explore all

Edge swipe open

Drag-linked backdrop

Open to see details

Expand shared surface

Collapse persistent panel

Tooltips

Explore tooltip and hover-card micro interactions for useful context, link previews, and shared hover delays. Keep supporting information accessible to mouse and keyboard users.

Explore all

Shipped by two hours ago

Hover card

Hover, focus, or tap

Warm delay group

Toasts

Explore toast micro interactions for undo actions, asynchronous results, and swipe dismissal. Give users clear feedback and a way to recover from a change.

Explore all

Undo countdown toast

Promise toast morph

Swipe to dismiss toast

Lists

Explore list micro interactions for reordering, pinning, archiving, inserting, and previewing items. Keep changes understandable without losing the user’s place.

Explore all

A hardcoded max-height eases wrongly and breaks the moment content changes.

Accordion

In progress
Done

Select an item to move

Move between groups

  • 1Ingest
  • 2Transform
  • 3Validate
  • 4Publish

Drag to reorder

Items0 pinned
Item 1
Item 2
Item 3

Pin item to top

Items3 items
Item 1
Item 2
Item 3

Archive item with undo

Items2 items
Item 1
Item 2

Insert new list item

Selected item

Item 1

Sample content for the first item.

Preview selected item

Sliders

Explore slider micro interactions for range selection, snap points, tooltips, scrubbing, and before-and-after comparisons. Try precise pointer and keyboard feedback.

Explore all
60

Drag thumb

Stepped snap

Drag or use arrow keys

Tooltip thumb

Tick highlights

25 – 80

Dual-thumb range

Before
After

Before / after compare

Drag past either end

Rubber band overdrag

4:2412:34

Scrubber preview

Stops: 0, 25, 50, 75, 100

Magnetic detents

Update level icon

Cards

Explore card micro interactions for expanding details, flipping content, revealing actions, swiping, and shared-element transitions. Give each interaction a clear purpose and result.

Explore all

Flip card

Expandable

Sample card

Card not saved.

Hover, focus, or tap

Action reveal

1 of 4Card 1
Card 1 of 4

Swipe to dismiss

Card 1
Card 1 of 4

Stacked deck cycle

Shared element expand