Status Indicator

Status indicator communicates the state of a certain resource in the system.



  • Indicate a system status of a certain resource.


  • If a status indicator describes something that's customizable or was entered by a user. Status indicator should have predictable and pre-defined states.
  • If a status indicator needs to be positioned near the label of the resource it's related to, use a badge instead.


  • Status indicator looks great inside a standalone "Status" column within tables.


  • Prefer one or two words max.
  • Avoid numbers.


Inherits margin props.


"success" | "error" | "processing" | "warning" | "inactive"

Status indicator variant.



Label describing the status.

On this page

  • Guidelines
  • When to use
  • When not to use
  • Placement
  • Content
  • Props