Fieldbook
Sign in

Components

Every component, live

Original React components you can drop into a project. Every plate below is the real component running live, so hover, click and type on it. Sign in for the source, the props panel, the install command and the Vue, Svelte, Astro and HTML versions.

26 of 26

Focus halo button
1696Focus halo buttonButtonsA solid button that inverts to an outline on pointer hover and grows two stacked translucent rings the moment it takes keyboard focus.
Rotating face plate
1742Rotating face plateButtonsA button whose labelled dark plate turns a corner and grows when engaged, exposing the accent slab underneath as four triangles, then shrinks and swaps colors with it while pressed.
Sweep invert button
1837Sweep invert buttonButtonsA deep navy button whose bright fill sweeps in from the right edge and flips the label to the dark tone with a quick squeeze.
Color swap play button
1849Color swap play buttonButtonsAn uppercase play pill that trades its ground and text colors on hover, lifting as its colored glow turns dark.
Outline invert button
1872Outline invert buttonButtonsA dark slate button ringed in a warm outline that trades every color with its border on hover and lifts on a shifting glow.
Invert Fill Button
1984Invert Fill ButtonButtonsA small outlined button that fills solid on hover while its label crosses to the opposite value, trading foreground and background cleanly.
Italic outline fill button
2174Italic outline fill buttonButtonsA quiet outlined button set in italic type that inverts to a solid accent fill the moment a pointer or keyboard reaches it.
Left Edge Fill Button
2378Left Edge Fill ButtonButtonsA soft rounded slab where a colored panel grows out of the left edge to fill the whole shape on hover, flipping the label as it passes.
Offset outline stack
2392Offset outline stackButtonsA bordered button face resting on stepped outline layers like a small pad of paper; hover slides the top sheet onto the stack and inverts its fill.
Expanding disc mute toggle
2520Expanding disc mute toggleButtonsA round icon toggle where a dark disc grows from the centre to swallow the pastel face, flipping the glyph to light as it passes underneath.
Invert on hover pill
2528Invert on hover pillButtonsA filled pill that trades fill and label colors and swells slightly on hover or keyboard focus, squeezing below its resting size while pressed.
Nudge arrow invert button
2530Nudge arrow invert buttonButtonsA dark uppercase pill with an arrow pinned to its right edge; hovering inverts it to a pale surface and nudges the arrow forward, and pressing flashes a warm fill.
Comb wipe invert button
2542Comb wipe invert buttonButtonsTwo interlocking striped combs slide in from above and below to cover a black pill, inverting the label as they pass.
Edge wipe invert
2597Edge wipe invertButtonsAn outlined button whose solid fill wipes in from one edge and inverts the label as it passes underneath.
Light pool button
2612Light pool buttonButtonsA lit tube-sign button that spills a blurred pool of its own colour onto the surface beneath it and swaps figure for ground when hovered or focused.
Sealing frame button
2615Sealing frame buttonButtonsA square outlined call to action whose border sits broken by three gaps at rest; hovering seals the frame shut as the fill inverts.
Skewed blade invert
2618Skewed blade invertButtonsA dark rounded button that inverts as a slanted accent blade opens outward from its center on hover or keyboard focus.
Diagonal wedge button
2676Diagonal wedge buttonButtonsA squared button filled by a triangular wedge that grows along the diagonal until it covers the whole face.
Interlocking comb button
2678Interlocking comb buttonButtonsTwo combs of vertical bars slide in from the top and the bottom and mesh together to fill the button, inverting the label as they pass.
Arrow wipe button
2683Arrow wipe buttonButtonsA pill button whose accent plate, cut into an arrowhead, sweeps in from the left on hover and inverts the label letter by letter as its point crosses.
Converging chevron button
2684Converging chevron buttonButtonsTwo arrow shaped plates fly in from opposite sides and meet in the middle of the button, sealing it shut behind the label.
Hatch sweep button
2685Hatch sweep buttonButtonsFine diagonal hatching fades in over the button on hover and scrolls forever, inverting the label wherever a line crosses it.
Slanted shutter button
2692Slanted shutter buttonButtonsTwo slanted accent panels drop from above and below to close over the pill on a diagonal seam while the label rolls once and inverts through the fill.
Word tumble button
2694Word tumble buttonButtonsHovering rolls the uppercase label over itself inside a clipped slot while a diagonal accent fill sweeps the panel behind it and a difference blend flips the word color.
Invert and lift button
2700Invert and lift buttonButtonsA tall outlined button that inverts to a solid fill and lifts a couple of pixels on hover, then settles flat again when pressed.
Invert and grow button
2770Invert and grow buttonButtonsA bordered block that swaps its ink and paper colors and grows from its center while hovered, then snaps flat under the press.
Open the full index
Tags
3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (6)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (3)columns (3)combobox (4)command palette (3)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (12)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (8)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (3)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (11)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)wrapper (3)zoom (4)