Tag component + tooltip

A molecule from a design system I worked on recently. Like usual, this was recorded in the browser at a high zoom level. I use Kap, it's a great way to record GIFs without overdoing it.

As you might expect, this is a simple tag that's reused in multiple scenarios within the product. One of those scenarios is narrowing search scopes. As the user types and hits Return or comma, the last word they wrote turns into a tag that can be deleted.

I'm also really happy we implemented an accessible tooltip system that stores the tooltip text within an aria-label tag. It's one of those common cases when building for people with accessibility problems first benefits everyone. Check out a screenshot of the component's code in the attachments (Tachyons FTW). 😎