Discount Input
A coupon code text field for your cart overlay or cart page — applies codes to the live Storefront cart and surfaces inline errors for invalid codes.
Last updated
How to use
Place this component in your cart overlay or cart page — typically behind a "Have a code?" disclosure you design yourself.
Style the typed text with
Font,Transform, andColor, plusPlaceholderandPlaceholder Colorfor the empty state.Style
Styles(Default / Hover / Focus / Error),Padding, andRadius.Customize
Validation— the three message strings, plusGap,Font, andColorfor the inline error text.Add a Discount Apply Button nearby, or customers can press Enter to submit.
Styling each field state
The field has four independent style groups — Default, Hover, Focus, and Error — each with its own background and border. Focus uses the same inset-ring treatment (Border + Shadow + Transition) used across Butter's other form fields.
Font, Transform, and Color style the input text itself and apply universally across all states.
Writing the inline validation messages
Validation holds the copy shown below the field on a failed submit, plus Gap/Font/Color for that error text — separate from the field's own visual Styles:
| When it shows |
|---|---|
Invalid Code | The entered code doesn't exist, has expired, or can't be combined with what's already applied. Supports a |
No Cart | There's no active cart to apply the code to. |
Generic | Fallback message for any other failure. |
What happens while a code is checked
The field disables itself with reduced opacity while the code is being checked — there's no separate Disabled style group to configure, then re-enables once the check resolves. If the code turns out to be invalid, expired, or non-combinable, the field switches to its error-styled treatment and shows the matching message from Validation underneath; both clear as soon as the customer starts typing again.