A change and which way it went, beside a figure that is not on a stat card: "+2 this week" under a project's progress, "−3.1% vs. July" in a table cell. Good news takes the ink; bad news takes the danger ink, a ringed arrow and a hidden "unfavorable", so color never carries it alone. sui-stat-card draws the same mark.
import { Component } from "@angular/core";
import { SuiTrend } from "@shineui/angular";
@Component({
standalone: true,
imports: [SuiTrend],
template: `<sui-trend value="+2" direction="up" note="this week"></sui-trend>`,
})
export class Example { }
Good and bad news
Good news takes the positive ink, green under semantic status. Bad news takes the danger ink, its arrow ringed and a hidden "unfavorable" after it. A change that is neither takes the muted ink at regular weight. Whether a rise is good is yours to say: severity="critical" marks a rising receivable.
The trend takes the size of the text around it, so it sits under a hero figure without a size of its own. sui-stat-card, on the right, draws the same mark under its value through delta, delta-direction and severity.
In a cell the trend takes the cell's text size. Set severity row by row: more cash is good news, older receivables are not, a smaller bill to pay is, and a flat payroll is neither.
How the change reads, on the status ladder sui-stat-card shares: positive, good news, in the positive ink (the ink under brand status, green under semantic); critical, bad news, in the danger ink with the arrow ringed and a hidden "unfavorable" after the figure; neutral, neither, in the muted ink at regular weight, the arrow kept and unringed, so no tone rests on colour alone. Whether a rise is good is yours to say, since a rising receivable is bad: severity="critical" marks it. An unknown value reads as positive. Reflected.
value
value
string
''
The change as text, formatted before it is passed: "+12.4%", "2 more".
Types
SuiTrendSeveritytypeHow a change reads, on the library's status ladder: positive is good news, critical bad news, neutral neither.
No members.
Theming
Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.