Ready

Issue Indicator

The Issue Indicator is a component used to visually signify a warning or error state in a specific element or context.

Ready

Issue Indicator

The Issue Indicator is a component used to visually signify a warning or error state in a specific element or context.

Ready

Issue Indicator

The Issue Indicator is a component used to visually signify a warning or error state in a specific element or context.

Anatomy

Anatomy

Anatomy

  1. Icon

  2. Tooltip

Variants

Variants

Variants

  1. Error

  2. Multiple erros

  3. Warning

  4. Multiple warnings

States

States

States

  1. Default

  2. Hover

Behaviors

Behaviors

Behaviors

  • The tooltip appears on hover (for mouse users).

  • The tooltip should dismiss when the user moves the pointer away.

Best Practices

Best Practices

Best Practices

1. When to use

Use the Issue Indicator to highlight issues or errors associated with a specific element or context. Avoid using this component for non-critical or purely informational purposes. ¹

2. Content

Provide actionable or informative text in the tooltip to help users understand and resolve the issue. Do not overload the tooltip with excessive text or unrelated details. ¹

3. Overloading

Avoid overloading the interface with too many Issue Indicators. Prioritize and group related issues when possible.

More

More

More

Related Components

Accessibility

Color contrast ratio for our Issue Indicator component meets AA standards, based on Web Content Accessibility Guidelines (WCAG) guidelines.

Additional Reading

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies