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 system errors or non-critical informational. ¹

2. Overloading

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

Content

Beta

Content

Beta

Content

Beta

Issue indicators should include actionable or informative information that helps users understand and resolve the issue. Do not include excessive details. Keep tooltip text short and to the point.¹

More

More

More

Related Components

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