Developer Programs

Learn

Docs

Status Icon

Components > Displaying Data > Status Icon
Use this component to...
Compactly display a status visually

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:

Information
Success
Error
Warning
TrendUp
TrendDown

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.

Example of status icons used in a column within a responsive table
AccountApplication DateLoan TypeLoan AmountStatusComments
0000009782: PHILLIPS,GARY11/02/2021New Auto$17,500.00
0000009782: COSTANZA,GEORGE11/02/2021HELOC$32,000.00
0000005928: JOHNSON,HARRIET10/28/2021Used Auto$6,500.00Countered with loan amount of $5000
0000109230: JONES,MARK10/22/2021Line of Credit$8,000.00No credit history
0000009283: SMITH,MARY10/02/2021New 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.

QuarterSales
Q1$1,390,291
Q2$1,520,315
Q3$1,279,626
Q4$1,463,200
Don't use a status icon to display field-level validation errors
See Validating Forms for more information on how to display validation errors.

Development

Web component development

Component reference

rui-status-icon
rui-status-icon
Module: rui-notifications - Package: @jkhy/responsive-ui-wc

Themed icon that indicates a status within a small space

NameTypeDefaultDescription
typestring'information'

Specifies the type of icon and styling to display.

One of:

  • information
  • success
  • error
  • warning
  • trend-up
  • trend-down
iconTypestring''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.
sizestring'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.

Import the module
// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-notifications/rui-notifications-imports';

Place a rui-status-icon element within a grid cell, template, or other smaller-sized location, specifying the type.

Status icon
<rui-status-icon type="success"></rui-status-icon>

To display a different icon than the default, set iconType to the desired icon.

Status icon displaying non-default icon
<rui-status-icon type="error" iconType="print"></rui-status-icon>

If a custom icon is required, use the custom-icon slot with the fill attribute set to currentColor.

Status icon displaying custom icon
<rui-status-icon type="error">
    <svg slot="custom-icon" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 26.016q0 2.496 1.76 4.224t4.256 1.76 4.224-1.76 1.76-4.224v-2.016h8v2.016q0 2.496 1.792 4.256t4.224 1.728q2.464 0 4.224-1.76t1.76-4.224-1.76-4.256-4.224-1.76h-2.016v-8h2.016q2.464 0 4.224-1.76t1.76-4.224-1.76-4.256-4.224-1.76-4.256 1.76-1.76 4.256q0 0.992 0.384 1.984h-8.736q0.352-1.024 0.352-1.984 0-2.496-1.76-4.256t-4.224-1.76-4.256 1.76-1.76 4.256 1.76 4.224 4.256 1.76h1.984v8h-1.984q-2.528 0-4.256 1.792t-1.76 4.224zM4 26.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM4 6.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM12 20v-8h8v8h-8zM24 26.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM24 6.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408z"></path>
    </svg>
</rui-status-icon>

Angular wrapper development

Wrapper reference

jha-status-icon
jha-status-icon
Module: JhaNotificationsModule - Package: @jkhy/responsive-ui-angular

Themed icon that indicates a status within a small space

NameTypeDefaultDescription
jhaTypestring'Information'

Specifies the type of icon and styling to display.

One of:

  • Information
  • Success
  • Error
  • Warning
  • TrendUp
  • TrendDown
jhaIconTypestring''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.
jhaSizestring'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.

Import the module
// import into app.module
import { JhaNotificationsModule } from '@jkhy/responsive-ui-angular/jha-notifications';

@NgModule({
    imports: [
        ...
        JhaNotificationsModule,
        ...
    ]
})

export class AppModule(){}

Place a jha-status-icon element within a grid cell, template, or other smaller-sized location, specifying the jhaType.

Status icon
<jha-status-icon jhaType="Success"></jha-status-icon>

To display a different icon than the default, set jhaIconType to the desired icon.

Status icon displaying non-default icon
<jha-status-icon jhaType="Error" jhaIconType="Print"></jha-status-icon>

If a custom icon is required, use the custom-icon slot with the fill attribute set to currentColor.

Status icon displaying custom icon
<jha-status-icon jhaType="error">
    <svg slot="custom-icon" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 26.016q0 2.496 1.76 4.224t4.256 1.76 4.224-1.76 1.76-4.224v-2.016h8v2.016q0 2.496 1.792 4.256t4.224 1.728q2.464 0 4.224-1.76t1.76-4.224-1.76-4.256-4.224-1.76h-2.016v-8h2.016q2.464 0 4.224-1.76t1.76-4.224-1.76-4.256-4.224-1.76-4.256 1.76-1.76 4.256q0 0.992 0.384 1.984h-8.736q0.352-1.024 0.352-1.984 0-2.496-1.76-4.256t-4.224-1.76-4.256 1.76-1.76 4.256 1.76 4.224 4.256 1.76h1.984v8h-1.984q-2.528 0-4.256 1.792t-1.76 4.224zM4 26.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM4 6.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM12 20v-8h8v8h-8zM24 26.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408zM24 6.016q0-0.832 0.576-1.408t1.44-0.608 1.408 0.608 0.576 1.408-0.576 1.408-1.408 0.576-1.44-0.576-0.576-1.408z"></path>
    </svg>
</jha-status-icon>

Component playground


Design

Figma design

Figma design info
You can find this component in the Components - Notifications page in the Figma UI Kit.
Dev ComponentDesign Component Name
Status icon

RUI / Notifications / Status Icon

Available values for the Type property:

  • Information
  • Success
  • Warning
  • Error
  • TrendUp
  • TrendDown

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

Adobe XD design info
You can find this component in these artboards in the Adobe XD design samples:
  • Sample App - Status Icon
Dev ComponentDesign Component Name
Status icon - successJHA / Notifications / Status Icon / Success
Status icon - informationJHA / Notifications / Status Icon / Information
Status icon - warningJHA / Notifications / Status Icon / Warning
Status icon - errorJHA / Notifications / Status Icon / Error
Status icon - trend upJHA / Notifications / Status Icon / Trend Up
Status icon - trend downJHA / 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.


Support options
Have questions on this topic?
Join the Responsive UI team in Microsoft Teams to connect with the community.
See something in this page that needs to change?
Send us feedback on this page.
Last updated Wed Sep 25 2024