Badge

@shopify/shop-minis-platform-sdk / components/Badge/Badge

BadgeProps

Properties

accessibilityLabel?

optional accessibilityLabel: string

strikethroughText?

optional strikethroughText: string

The text to be displayed in the badge with a strikethrough. This is useful for showing a discount price.

Example

"50% off"
"Extra Discount"
"$100.00"

Component

Optional

const text = "$100.00"
const strikethroughText = "200.00"
const accessibilityLabel = "50% off badge"
const variant = "saleFilled"

 return (
   <Badge
    variant={variant}
    text={text}
    strikethroughText={strikethroughText}
    accessibilityLabel={accessibilityLabel}
   />
 )

text

text: string

The text to be displayed in the badge. This is the main content of the badge.

Required

Example

"50% off"
"Extra Discount"
"10 left"

variant

variant: BadgeVariant

A Badge is made up mainly of variant and text. The variant determines the color of the badge.

Component

Example

Required

const text = "50% off"
const variant = "saleFilled"

 return (
   <Badge
    variant={variant}
    text={text}
   />
 )

---

Badge()

Badge(__namedParameters): Element

Parameters

Parameter	Type
__namedParameters	BadgeProps

Returns

Element