Status Icon
Overview
Applications often need to indicate a status for an object.
- Use a status icon to visually indicate a status where you have limited space in which to display it. A status icon displays an appropriate icon for the status, using a themed color. One example of this might be within a data grid cell or within a template.
- Use an inline notification when you want to communicate a status and have more room to do so. An inline notification provides more immediate context, but takes more space and often would not be a good option within a grid cell or a template.
The following status icons are supported:
Always display a status icon with additional context that helps the user understand the circumstances of the status. It must appear along with other data that provides context, such as other columns in the same grid row or other elements in the template.
Account | Application Date | Loan Type | Loan Amount | Status | Comments |
---|---|---|---|---|---|
0000009782: PHILLIPS,GARY | 11/02/2021 | New Auto | $17,500.00 | ||
0000009782: COSTANZA,GEORGE | 11/02/2021 | HELOC | $32,000.00 | ||
0000005928: JOHNSON,HARRIET | 10/28/2021 | Used Auto | $6,500.00 | Countered with loan amount of $5000 | |
0000109230: JONES,MARK | 10/22/2021 | Line of Credit | $8,000.00 | No credit history | |
0000009283: SMITH,MARY | 10/02/2021 | New Auto | $25,000.00 |
The TrendUp and TrendDown status icons are typically displayed next to a numeric amount to indicate whether that value is trending up or trending down.
Quarter | Sales |
---|---|
Q1 | $1,390,291 |
Q2 | $1,520,315 |
Q3 | $1,279,626 |
Q4 | $1,463,200 |
Development
Web component development
Component reference
rui-status-icon
Themed icon that indicates a status within a small space
Name | Type | Default | Description |
---|---|---|---|
type | string | 'information' | Specifies the type of icon and styling to display. One of:
|
iconType | string | '' | By default, the status icon displays a specific default icon for each of the types above. You can override the icon displayed by assigning a different icon type from this list. The use of custom icons is also supported. |
size | string | '16px' | Specifies the size of the status icon. Use CSS notation appropriate for the CSS “width” and “height” attributes. |
Implementation
Begin by importing the rui-notifications
module into your application.
Place a rui-status-icon
element within a grid cell, template, or other smaller-sized location, specifying the type
.
To display a different icon than the default, set iconType
to the desired icon.
If a custom icon is required, use the custom-icon slot with the fill
attribute set to currentColor
.
Angular wrapper development
Wrapper reference
jha-status-icon
Themed icon that indicates a status within a small space
Name | Type | Default | Description |
---|---|---|---|
jhaType | string | 'Information' | Specifies the type of icon and styling to display. One of:
|
jhaIconType | string | '' | By default, the status icon displays a specific default icon for each of the types above. You can override the icon displayed by assigning a different icon type from this list. The use of custom icons is also supported. |
jhaSize | string | '16px' | Specifies the size of the status icon. Use CSS notation appropriate for the CSS “width” and “height” attributes. |
Implementation
Begin by importing the JhaNotificationsModule
module into your application.
Place a jha-status-icon
element within a grid cell, template, or other smaller-sized location, specifying the jhaType
.
To display a different icon than the default, set jhaIconType
to the desired icon.
If a custom icon is required, use the custom-icon slot with the fill
attribute set to currentColor
.
Component playground
Design
Figma design
Dev Component | Design Component Name |
---|---|
Status icon | RUI / Notifications / Status Icon Available values for the Type property:
|
Add an appropriate status icon component — Success, Information, Warning, or Error — to each row of a responsive table or grid as needed to indicate the status of that row. Horizontally center the status icon in its table/grid column.
Display the trend status icon components — TrendUp and TrendDown — next to a numeric amount if you need to indicate whether that value is trending up or trending down.
Adobe XD design
- Sample App - Status Icon
Dev Component | Design Component Name |
---|---|
Status icon - success | JHA / Notifications / Status Icon / Success |
Status icon - information | JHA / Notifications / Status Icon / Information |
Status icon - warning | JHA / Notifications / Status Icon / Warning |
Status icon - error | JHA / Notifications / Status Icon / Error |
Status icon - trend up | JHA / Notifications / Status Icon / Trend Up |
Status icon - trend down | JHA / Notifications / Status Icon / Trend Down |
Add an appropriate status icon component — Success, Information, Warning, or Error — to each row of a responsive table or grid as needed to indicate the status of that row. Horizontally center the status icon in its table/grid column.
Display the trend status icon components — TrendUp and TrendDown — next to a numeric amount if you need to indicate whether that value is trending up or trending down.