Ecommerce UI Kit — EU 2026 Checkout Buttons & 30-Day Price Badges
For designers of EU online shops redesigning the checkout for the withdrawal button in force since 2026-06-19. Paste one product's last 30 days of prices — the kit's sale badge is computed below.
Your -40% badge is legally -24%
| Your planned badge (vs "was" price) | -40% vs €99.00 |
| Lowest price in 30 days (PID Art. 6a) | €79.00 |
| Discount you may print | -24% |
| Overstated by | 16 points |
| Days read | 30 |
This is the kit's Price badge and Product card, filled with your numbers. Change any value on the left — it recomputes.
One-time payment, not a subscription. You have already seen your own answer above before paying anything.
Free: the Checkout button set (4 variants)
Free download: these four variants as a Figma plugin, 4 SVGs and a .sketch file — complete for one job, the two buttons EU law words for you.
What you lose if these are wrong — and when
- Order button: under Consumer Rights Directive Art. 8(2) it must read "order with obligation to pay" or an equally unambiguous wording. If not, the consumer is not bound by the order.
- Withdrawal button: Directive (EU) 2023/2673 adds Art. 11a — a "withdraw from contract here" function and a "confirm withdrawal" step. It applies from 19 June 2026, so it is already in force.
- Sale badge: Price Indication Directive Art. 6a — a price reduction must state the lowest price of the previous 30 days or more. A badge measured against a price raised last week overstates the discount.
- Fines: CRD Art. 24(3), as amended by the Omnibus Directive 2019/2161 — in coordinated EU actions the maximum fine is at least 4% of annual turnover.
Why a free kit or a chatbot does not do this
Free Figma Community ecommerce kits label the last button "Buy" or "Place order", have no withdrawal button and show sale badges without a prior price. A chatbot can tell you the rule but will not draw 26 Figma component variants.
What is in the full kit (counted)
| Checkout button — Order · Withdraw · Confirm withdrawal · Order disabled | 4 |
| Price badge — Sale percent · Prior price · New · Sold out | 4 |
| Product card — On sale · Regular · Sold out | 3 |
| Checkout input — Placeholder · Filled · Error | 3 |
| Consent checkbox — Terms checked · Unchecked · Digital content waiver | 3 |
| Checkout alert — Withdrawal received · Withdrawal period · Payment failed | 3 |
| Checkout steps — Step 1 · Step 2 · Step 3 | 3 |
| Product page tabs — Description · Delivery and returns · Product safety | 3 |
| 8 components | 26 |
How to get it into Figma
- In Figma, drag the .sketch file onto the file browser to open it.
- SVG files: copy and paste them into a frame — they come in as vectors.
- Plugin: it ships as TypeScript source (code.ts). Run tsc to get code.js, then import manifest.json as a development plugin; it rebuilds the components as real variant sets.
- Replace #1E3A8A with your brand colour in Selection colors, and the example prices with the ones computed above.
Menu names differ by Figma version and UI language. Some component structure may be simplified in the .sketch import (not measured). Sketch users open the same .sketch file. This is a design kit, not legal advice.
Yardstick
Rival ecommerce UI kits on this shelf list at up to $168 (our 2026 shelf measurement), without the EU checkout wording or a 30-day prior price.
