theming

All the samples below are using jsx syntax, be careful.

The component has the next default styles:

{
  "zIndex": "10",
  "display": "flex",
  "borderRadius": "4px",
  "padding": "10px 15px",
  "fontFamily": "inherit",
  "alignItems": "center",
  "justifyContent": "space-between"
}

Providing a styles prop will override the default styles or add new ones, under the hood spread operator is used.

Using color prop will change the next things:

text color
border color
product hunt icon color

Wanna change the position of the badge?

You can use styles prop to change the position of the badge.

{
  "right": "3",
  "bottom": "3",
  "position": "fixed"
}

Wanna use a different Background Color?

Set a new backgroundColor for your badge, define backgroundColor prop.

<Badge backgroundColor='#000' />