Best use cases for "status light" and "labels"

Question

I am trying to figure out if I should add status lights to my design system or if I could use the labels I already have instead. They are both defined in Adobe Spectrum but I don't quite understand in which context I would use status lights. I wanted to ask if anyone has a clear definition of when to use each.

Status lights

Labels

Thanks a lot in advance!

Answer 1

I think the way I'd look at this is that a status label is communicating a single piece of information (in your example a status) but a label is potentially communicating several concepts together e.g. Active & Beginner

Both have the capability to include semantic colouring, but I wouldn't rely on that alone to communicate the message.

You could happily use labels to serve the purpose of a status light conceptually, so I think the decision is likely down to:

• Personal preference, do you want to have two components?
• Conflation of concepts, do you want to have labels communicate many things? Does it become confusing if you have screens which show both a status (as a label) and a label for something different?

Ultimately you should make this decision based on the needs of your system considering the tradeoffs between more components and re-using the same component for different reasons. If you're just starting out it may be easier to start with your labels, and wait for a strong reason to create a distinct component to avoid additional work, maintenance and potentially clarity issues about when to use each.