Get help Color blind mode Low vision mode

StatusIcon

StatusIcons are used to visually communicate statuses like succeess or error. As they are purely visual, and not present for assistive technologies, they must not be used as the only indication of status.

Open in new window 
<duet-grid grid-template="medium">
  <table>
    <tr>
      <td></td>
      <th>Default</th>
      <th>Strong</th>
    </tr>
    <tr>
      <th class="duet-text-right">Default (info)</th>
      <td class="duet-text-center"><duet-status-icon size="x-large"></duet-status-icon></td>
      <td class="duet-text-center"><duet-status-icon size="x-large" strong></duet-status-icon></td>
    </tr>
    <tr>
      <th class="duet-text-right">Success</th>
      <td class="duet-text-center"><duet-status-icon size="x-large" variation="success"></duet-status-icon></td>
      <td class="duet-text-center"><duet-status-icon size="x-large" variation="success" strong></duet-status-icon></td>
    </tr>
    <tr>
      <th class="duet-text-right">Warning</th>
      <td class="duet-text-center"><duet-status-icon size="x-large" variation="warning"></duet-status-icon></td>
      <td class="duet-text-center"><duet-status-icon size="x-large" variation="warning" strong></duet-status-icon></td>
    </tr>
    <tr>
      <th class="duet-text-right">Danger</th>
      <td class="duet-text-center"><duet-status-icon size="x-large" variation="danger"></duet-status-icon></td>
      <td class="duet-text-center"><duet-status-icon size="x-large" variation="danger" strong></duet-status-icon></td>
    </tr>
  </table>
</duet-grid>

Properties #

Property Attribute Description Type Default
margin margin Controls the margin of the component. "auto" | "none" "auto"
size size Icon size. Entered as one of the icon size design tokens. "auto" | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "xxx-small" "medium"
strong strong Use strong background color when the icon would not otherwise stand out from the surrounding background. boolean false
variation variation Status the icon indicates "danger" | "default" | "success" | "warning" "default"

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • To provide visual highlight of status in e.g. alerts

When not to use #

  • Any other purpose than communicating status - use instead regular icon

Variations #

This section describes the different component variations, their purpose, and when to use each variation.

Name Purpose
default For neutral status, when the status is neither success nor error
success When an interaction or process has been carried out successfully and with intended outcome
warning When the status might come as surprise to the user and their attention needs to be drawn to it
danger When thing have gone wrong, the outcome is not what the user inteded, or when the user needs to take corrective action

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.