Variants
Example of Trend - default
React documentation
Last modified:
Trend Props
| Prop | Type | Required? | Default | Purpose |
|---|---|---|---|---|
children | React.ReactNode | required | Used for the contents of the page alert. | |
variant | string | optional | Used to set the BEM modifier/variant for either --up or --down. | |
size | string | optional | Used for sm, lg, and xl sizing variants. |
Possible values for variant prop
| Prop | Value | Purpose |
|---|---|---|
variant | up | Used to set trend='up' for the positive change variant and also provides a visually hidden span holding string positive. |
variant | down | Used to set trend='down' for the negative change variant and also provides a visually hidden span holding string negative. |
Possible values for size prop
size values | Description |
|---|---|
sm | Sets the small size. |
lg | Sets the large size. |
xl | Sets the extra-large size. |
Any extended types: React.HTMLAttributes<HTMLSpanElement>.
HTML
Last modified:
As Trends are often ‘values’ for or of a thing, use semantic markup to wrap them.
Design
Last modified:
Use Trend to show at glance whether a metric has changed over time with the following variants available:
| Variant | Purpose |
|---|---|
bc-trend--up | Used to set positive change variant and also provides a visually hidden span holding string positive. |
bc-trend--down | Used to set negative change variant and also provides a visually hidden span holding string negative. |
bc-trend--sm | Used to set small size variant. |
bc-trend--lg | Used to set large size variant. |
bc-trend--xl | Used to set extra-large size variant. |
Accessibility
Last modified:
Trend component styles do not provide any semantics, so the direction of the change (positive or negative) should also be indicated at minimum using a visually hidden string.
Trend 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 metric values.
Green color are used to signify positive change or up metric and red color are used to signify negative change or down metric.
See also
Last modified: