props

{
  "token": "string", // token value
  "styles": "object", // custom styles
  "product": "string", // product name
  "compact": "boolean", // default false
  "tagline": "string", // default "Featured on"
  "color": "string", // hex color: default #FF6154,
  "backgroundColor": "string" // hex color: default #FFFFFF,
}

Token

To retrieve your token, please visit your Product Hunt Dashboard and create a new application.

Product

The product name is the slug of the product you want to display. For example, if you want to display this product you would use ph-badge as the product name. This is the last part of the URL of the product.

Styles

You can customize the styles of the component by passing a styles object. See Theming to get a full guide how to customize the styles.

Compact

The compact prop will render a smaller version of the badge, only showing upvotes and logo.

Tagline

The tagline prop will render a custom tagline instead of the default Featured on phrase.