Search/

Rewards

Last modified:

For displaying monetary and point rewards.

Variants

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

PropTypeRequired?DefaultPurpose
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>

HTML

Last modified:

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

Design

Last modified:

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

  • positive
  • negative

Accessibility

Last modified:

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

See the HTML guidance.

Rationale

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: