Vendure Product Badges Component

Headless badge rendering component for Vendure products and search results.

Purpose

ProductBadge provides a composable API for rendering badge assets injected by VendureBadgePlugin. It keeps layout control in the UI layer while exposing grouped badges by position.

Features

• Renders badges from Product or SearchResult
• Position-based grouping (top-left, top-right, etc.)
• Compound components for root, groups, items, and images
• Works with asChild composition patterns
• Returns null when the badge plugin is disabled or no badges are available

Installation

npm

npm install @haus-storefront-react/vendure-plugin-configs

Yarn

yarn add @haus-storefront-react/vendure-plugin-configs

Note: This is not a public package. Contact the Haus Tech Team for access.

API Reference

Components

ProductBadge.Root

Root provider that computes grouped badge positions and shares context to descendants.

Prop	Type	Required	Default	Description
product	Product | SearchResult	Yes	-	Product or search result that contains badges
asChild	boolean	No	false	Render as child component
children	(context: ProductBadgeContextValue) => React.ReactNode	No	-	Render function receiving grouped badge context

ProductBadge.Group

Renders badges for a specific position inside ProductBadge.Root.

Prop	Type	Required	Default	Description
position	string	Yes	-	Badge position key
asChild	boolean	No	false	Render as child component
children	(context: { badges: Badge[]; position: string }) => React.ReactNode	No	-	Render function receiving badges at position

ProductBadge.Item

Wrapper for individual badge content.

Prop	Type	Required	Default	Description
badge	Badge	No	-	Badge metadata
asChild	boolean	No	false	Render as child component

ProductBadge.Image

Renders the badge asset image.

Prop	Type	Required	Default	Description
badge	Badge	Yes	-	Badge containing image asset
asChild	boolean	No	false	Render as child component

Basic Usage

Render product badges

React

import { ProductBadge } from '@haus-storefront-react/vendure-plugin-configs/badge'

function ProductCard({ product }) {
  return (
    <ProductBadge.Root product={product}>
      {({ positions }) => (
        <>
          {positions.map((position) => (
            <ProductBadge.Group key={position} position={position}>
              {({ badges }) => (
                <>
                  {badges.map((badge) => (
                    <ProductBadge.Item key={badge.id} badge={badge}>
                      <ProductBadge.Image badge={badge} />
                    </ProductBadge.Item>
                  ))}
                </>
              )}
            </ProductBadge.Group>
          ))}
        </>
      )}
    </ProductBadge.Root>
  )
}

React Native

import { View } from 'react-native'
import { ProductBadge } from '@haus-storefront-react/vendure-plugin-configs/badge'

function ProductCard({ product }) {
  return (
    <ProductBadge.Root product={product}>
      {({ positions }) => (
        <View>
          {positions.map((position) => (
            <ProductBadge.Group key={position} position={position}>
              {({ badges }) => (
                <>
                  {badges.map((badge) => (
                    <ProductBadge.Item key={badge.id} badge={badge}>
                      <ProductBadge.Image badge={badge} />
                    </ProductBadge.Item>
                  ))}
                </>
              )}
            </ProductBadge.Group>
          ))}
        </View>
      )}
    </ProductBadge.Root>
  )
}

Advanced Usage

Restrict by position in UI

React

import { ProductBadge } from '@haus-storefront-react/vendure-plugin-configs/badge'

function ProductBadgesTopLeft({ product }) {
  return (
    <ProductBadge.Root product={product}>
      <ProductBadge.Group position='top-left'>
        {({ badges }) =>
          badges.map((badge) => (
            <ProductBadge.Item key={badge.id} badge={badge}>
              <ProductBadge.Image badge={badge} />
            </ProductBadge.Item>
          ))
        }
      </ProductBadge.Group>
    </ProductBadge.Root>
  )
}

React Native

import { View } from 'react-native'
import { ProductBadge } from '@haus-storefront-react/vendure-plugin-configs/badge'

function ProductBadgesTopLeft({ product }) {
  return (
    <ProductBadge.Root product={product}>
      <ProductBadge.Group position='top-left'>
        {({ badges }) => (
          <View>
            {badges.map((badge) => (
              <ProductBadge.Item key={badge.id} badge={badge}>
                <ProductBadge.Image badge={badge} />
              </ProductBadge.Item>
            ))}
          </View>
        )}
      </ProductBadge.Group>
    </ProductBadge.Root>
  )
}

---

Made with ❤️ by Haus Tech Team