Promo Code

A code to receive a discount at checkout.

UsageGuidelinesAPI

A promo code is a code that the user can enter to receive a discount at checkout.

Usage

ReactVanilla

<PromoCode>
  <Typography textColor="success" fontWeight="standard">
    USING TYPOGRAPHY'S SUCCESS TEXT
  </Typography>
</PromoCode>

<PromoCode>
  <Typography textColor="success" fontWeight="standard">
    USING TYPOGRAPHY'S SUCCESS TEXT
  </Typography>
</PromoCode>

<div class="swan-promo-code">
  <div class="swan-font-weight-standard swan-text-color-success">
    USING TYPOGRAPHY'S SUCCESS TEXT
  </div>
</div>

<div class="swan-promo-code">
  <div class="swan-font-weight-standard swan-text-color-success">
    USING TYPOGRAPHY'S SUCCESS TEXT
  </div>
</div>

Best practices

If the promo code has a label, it should say "Code:" and not "Promo Code:".
Display a promo code with an offer.
Make the code easy to remember, and easy to input in the promo drawer and at checkout.
Make the promo code live text whenever possible so that users can cut and paste it.

Props

PromoCode

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

Was this page useful?

Published: Jan 31, 2022Last updated: Sep 3, 2024

Progressive Image

Radio Button