Datapoint's trend prop requires an
accessibilityLabel to describe the trend icon (e.g., Trending up).
Be sure to localize the
tooltipText and trend
accessibilityLabel props. Note that localization can lengthen text by 20 to 30 percent.
Of particular importance is the need to localize the
value prop. Similar to text, numerical data needs to be localized with regard to characters displayed, separators used, currency, percentages, and other considerations.
trend to display the change in the value of a Datapoint over time. Make sure to provide an
accessibilityLabel when the trend is above or below zero.
By default, a positive trend will be considered "good" (displayed as a green trend), a negative trend "bad" (displayed as a red trend) and a trend of 0 "neutral" (displayed as a dark gray trend). However, the
trendSentiment property can be used to explicitly set whether the
trend is considered "good", "bad" or "neutral", as demonstrated below.
With a badge
Component quality checklist
Component is live in Figma, however may not be available for all platforms.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.