Pill text highlight

How to use it

Add a rounded rectangle behind specific words in text.

When to use it

Most often this is used for links. It's yet another style to make links stand out, and avoid the "boring" underline style that's the browser default. You could also use this for highlighting text, but the rounded corners makes the highlight appear to be a button, so it's best for interactive elements. Since this is also a fillable shape, you can colour it however you want to support your branding.

What to watch out for

Make sure you choose colours that have good contrast with the text. Choosing the wrong colours can make the text hard to read.

Depending on your line height, you might find it's hard to get text to sit inside the rounded rectangle without the rounded rectangle being too big and bumping into other words.

Examples