Last modified:

For displaying monetary and point rewards.


Example of Rewards - default

React documentation

Last modified:

To start using the BcReward component in your project, ensure you import it as following:

import { BcReward } from '@bugcrowd/bc-elements'

BcReward Props

variantstringoptionalUsed to switch between different variants.

Possible values for variant prop

variant valuesPurpose
blankStateUsed to display the text reward with increased font-size.
noneUsed to display the monetary reward with normal font-size.
positiveUsed to display the reward for positive points.
negativeUsed to display the reward for negative points.

Any extended types: React.HTMLAttributes<HTMLSpanElement>


Last modified:

As Rewards are often ‘values’ for or of a thing, use semantic markup to wrap them.


Last modified:

Use Rewards for displaying monetary and point rewards with BEM variants:

  • positive
  • negative


Last modified:

Rewards offer no semantics by themselves, so they must be nested in other semantic markup.

See the HTML guidance.


Last modified:

Users visually scanning for changes in monetary values or similar data points are aided by them being part of the typographic hierarchy, just as any other page content.

Green and red color are used to signify increases or decreases in values over time.

See also

Last modified: