Loading workspace…
Step 1 of 3

Set up your workspace

Name your workspace and choose where it lives
Already completed by Alex Marshall, so these fields are read-only
← All posts

Making labels pop with indicators

Designing status labels for our component library, and adding indicators to make them stand out

2 min read

I was recently designing some labels for our component library that we could use for things like invoice status, integration category and tags on user profiles.

They’re simple labels containing text and occasionally an icon, and would exist in several colours to accommodate as wide a range of use cases as possible

A grey label with text 'Label' and a tick icon

Once I’d settled on the general layout of the labels, I started playing around with colours; trying different combinations of background, border, text and icon colours.

I’d just finished overhauling our colour palette so had plenty of colours to play with; each one with a scale from 900 to 100

A purple colour scale with shades from 900 down to 100

As I’d recently reworked these colours, I already knew how to ensure that the contrast ratio between the darker text and lighter background colour met the minimum 4.5:1 requirement, so I set them up to use 100 for the background and 800 for the text.

I tested using a lighter colour for the icon but found that they were often difficult to make out as they were so small and mostly using an outline style. I felt that the label also felt a bit disconnected when the text and icon were different colours too

A series of 6 labels, each with the label 'Label' and an exclamation mark icon. The first 3 are purple and vary the shade of purple used for the icon. The second 3 are teal and vary the shade of teal for the icon

Once I’d finished this stage, I began introducing them into my current design projects as a way of "testing them in production" before we went ahead and built them

I quickly found that there were some locations and some colour combinations that felt a little flat or a little muted - they didn’t stand out quite as well as I wanted them to

Knowing that I didn’t have too much room to play with the contrast ratio, and without wanting to update our colour palette again just to accommodate this issue, I looked for other options

Shadows and borders made the labels feel overcomplicated, and whilst some labels looked good with filled icons, some didn’t, so I didn’t want to rely on this either

In the end I added what I’ve called an 'Indicator'. It’s a 6 x 6px square with a 1px corner radius and 8px padding all around. It uses a 500 colour, compared to the 100 background and 800 text and icon. And I think it looks pretty good if I do say so myself

2 labels with label 'Label' and an icon. One is purple and one is teal. They both have a square-with-rounded-corners indicator to the left of the text label. It uses purple-500 and teal-500 respectively

Maybe there’s something scientific happening here, or maybe it’s just a placebo, but I feel like the lightness of the indicator tricks my eyes into thinking that the label text is lighter than it is, which in turn makes the whole label 'pop' a bit more than it did before

A large series of labels with realistic content and colour usage, for example, a red 'Failed' label with exclamation mark icon, and a yellow 'Awaiting approval' label with no icon. They all have an indicator on the left

If you found this useful, or have any feedback or suggestions, feel free to message me on twitter! And if you want to show this some love on dribbble , it’d be much appreciated

Alex.