We’ve just enabled the “new navigation” in Jira and noticed that the UI Kit <Tag> component nows renders quite differently than before. Here’s what we saw:
This change is not only surprising, but also a big problem for us. So far we have used the coloring of the <Tag> to allow “quick recognition” of UI objects – just as the documentation says they are intended.
I have three questions about this change:
Is there any way for us to get the old UI look back, at least for some transitory period?
Will there be an update to the documentation, so that we can know what to expect when using UI Kit?
Will there be an update to AtlasKit, so that apps that use AtlasKit align with how the base product looks?
Finally, this may of course be on me. Did I just miss the correct announcement about UI Kit’s appearance changing?
I remember that announcement. This is not about being surprised by the general UI change, but very specifically about the <Tag> component which has changed notably.
Looking back at the original announcement, the sample screenshots of the new UI did include both rendering variants: The one with the thin border and the one with a solid background:
Now, I’m really not that good with keeping up with everything, but this specific change really matters a lot and I would’ve hoped for some sort of announcement or explanation. As of today, not even the documentation reflects the new state.
You can at least get the apparently-expected rendering if you go to the old version of the Atlaskit site, which has a feature flag dropdown that allows you to select the variant for the platform visual refresh:
we got several customers complaining about the “new” look of colored tags. It would be super great to have the option to render it solid by a parameter.
Hey partners, apologies for not seeing this earlier. (I just came across this now while looking for design language-related posts needing follow up.)
Really appreciate your efforts to keep UIs consistent for customers across Marketplace and Atlassian apps alike!
A few things that have happened since your earlier messages:
Changes to colours and components that were first introduced at Team '25 are now in GA, and should be consistent on atlassian.design docs, what appears in Atlassian products, Design System components on npm and Forge UI Kit — https://developer.atlassian.com/changelog/#CHANGE-2908
We’ve recently started work on the next iteration of improvements for each of our labelling components (Tag, Lozenge, Badge) to enable even more consistent and semantic usage (as you may have noticed they’re still used in different ways across apps today) — details to come
We heard the feedback and know it was confusing with different versions of components in use and being shown on atlassian.design docs, some feature-flagged, and we’re working on a solution for that for future releases
Can you please let me know if there are still any issues here for you folks? If so, I or my team will follow up.
For us, this is not about different versions of components or inaccurate documentation. It’s about the missing “filled“ option for tags (badge and lozenge still have it).
More and more customers are complaining about this, as the “light“ color mode is not what they are looking for.
Would be great if you could align tags, lozenges and badges to have the same options!
I’m from the Design System team Thank you for the detailed feedback and the comparison screenshots. It’s very helpful to see how these changes affect your app’s UX.
To answer your questions directly: the change you are seeing is an intentional part of the Visual Refresh mentioned in this announcement.
Why the change? (visual hierarchy)
This shift is driven by a new approach to visual hierarchy across Atlassian products. We want to ensure that “Status” (represented by Lozenges) remains the most prominent element on a page.
In this new iteration, we have actually removed the “subtle” (non-bold) lozenge style so that all lozenges remain bold and filled for maximum visibility. By moving Tags to an outlined style, we reduce visual noise and prevent categorization elements from competing for attention with critical status information
Tags vs. Lozenges
Use <Tag> for Categorization: If your “PHP” and “Java” labels are used for categorization (labels, metadata, etc.), then <Tag> is still the correct component to use, even in its new outlined form.
The “filled” look: There is currently no “filled” option planned for the new Tag component. If you require high visual prominence for something that behaves more like a status or a high-priority state, you might consider the bold lozenge. However, for general categorization, we recommend sticking with the Tag to stay aligned with the host product’s evolving language.
As @stephenmok mentioned, we are working on the next iteration of improvements for each of our labeling components. We’d love to have you take a deeper look at our Early Access Program (EAP) documentation on atlassian.design. It covers these visual refresh principles in detail and explains how Tag, Lozenge, and Badge are being streamlined for better semantic consistency:
We appreciate you being a part of this transition. If you have further thoughts on how this affects your specific categorization use case, we’re all ears!
Thank you for the detailed feedback and the comparison screenshots. It’s very helpful to see how these changes affect your app’s UX.