Skip to content
Site volume
Colourway

Comic kit

Key pop

The hit key's one small SFX: the first press per page view pops it at the key's top right.

Import from@maxgrits/overprint-react/comic
On this page

Every button is the comic hit key. KeyPop sits inside one and pops a small SFX the first time it is pressed on a page view, then leaves. It is the one client leaf of the comic kit.

Example#

Look of this example
Live render of examples/key-pop/basic.tsx

Usage#

Use KeyPop inside an action key to pop a small SFX the first time someone presses it on a page view: POW! by default. The key itself is the Button, which is already the comic hit key at every volume.

  • Inside a Button, as a child; the Button never imports it.
  • Once per page view, never at Quiet, never under reduced motion.
  • word changes the SFX; it passes checkSfx like any other.

Layer and volume#

The key looks the same at every volume and register. KeyPop: never at Quiet; Studio and up once per page view.

Anatomy#

The parts of examples/key-pop/basic.tsx, numbered:
  1. Hit keyThe Button, unchanged. The pop is hidden until the first press, at the key's top end, aria-hidden..mk-button

Volume#

  • Quiet

    Never.

  • Studio

    Once per page view.

  • Press

    Once.

  • Rave

    Once.

Content#

  • Short, happy SFX words: POW!, BAM!, TADA!

Do and don't#

Do

On a happy action.

Don't

A KeyPop on a "Delete the draft" key.

On a destructive one.

A pop celebrates. Celebrating a delete makes people doubt they pressed the right key.

Accessibility#

  • aria-hidden; the key's label stays the literal action.
  • Reduced motion: no pop. It dispatches mk:sfx (kind press) for the sound bus.

Props#

PropTypeDefaultDescription
wordstring"POW!"One SFX word (default "POW!").

Generated from KeyPopProps in packages/overprint-react/src/comic/key-pop.tsx.

Tokens#

System tokens (9)

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactThe print and comic kits, P0 (21 P2-T11 to P2-T15): the art core (seeded halftone, bursts, balloons, lines, krackle, printer's marks, SFX layers, the texture tiles and gen-print-tiles), the print kit (Halftone, Overprint, PrinterMarks, Sticker, Stamp, Seal, useStampLand, Tape, Grain, Misregistration and the .mk-ov second ink, GiantGlyph, ShapeGlyph), the data Cover (grid and score, coverAlt, CoverLegend), the comic registers and kit (Panel, PanelGrid, Balloon, Caption, CornerBox, EditorsNote, ContinuedIn, SFX, SfxBurst, SpeedLines, FocusLines, ImpactStar, KeyPop).