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
| Prop | Type | Required? | Default | Purpose |
|---|---|---|---|---|
variant | string | optional | Used to switch between different variants. |
Possible values for variant prop
variant values | Purpose |
|---|---|
blankState | Used to display the text reward with increased font-size. |
none | Used to display the monetary reward with normal font-size. |
positive | Used to display the reward for positive points. |
negative | Used 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:
positivenegative
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: