GGamma

Design catalogue

Source atlas

All entries522 results

ComponentsDisplays

Comparison reveal

A draggable before-and-after surface with a keyboard-operable divider.

Open in Gamma

What to study

  • Drag the divider or focus it and use arrow keys; Home and End reach either edge.
  • Provide equivalent sized layers so the split describes the same scene.
  • The artwork is a Gamma demo fixture; supply your own React content in production.

Topics

References

Material

Status
New
Source File
src/components/ComparisonReveal.tsx
Design System
gamma
Props
  • Name
    before / after
    Type
    ReactNode
    Default
    —
    Description
    Two aligned visual layers to compare.
  • Name
    position / defaultPosition
    Type
    number
    Default
    50
    Description
    Controlled or initial split from 0 to 100.
  • Name
    onPositionChange
    Type
    (position: number) => void
    Default
    —
    Description
    Receives pointer and keyboard adjustments.
  • Name
    beforeLabel / afterLabel
    Type
    string
    Default
    Before / After
    Description
    Visible labels for the two sides.