Skip to content

Playground ​

Every <klappay-button> combination on the page backgrounds a merchant's checkout is likely to have — each one is the real element, rendered by the package, not a screenshot. Use it to pick the variant that contrasts with your page: black on a light page, white on a dark one.

The last button in each row has no charge-id, so it renders in its disabled state. origin points at a placeholder domain, so clicking opens nothing real.

White page #ffffff

black
white

Paper page #f4f4f5

black
white

Ink page #09090b

black
white

Mid-gray page #71717a

black
white

CSS custom properties

radius 0
pill
height 56px
serif

Narrow container 160px

full, truncated
full, truncated
short, fits

Docs live in ./docs — the source of truth for both the package and this site.