Chip

Content

Overview

A pill with a 1px edge in the text colour, 0.875rem at 700. It is either a link or a plain tag.

Live example

Usage

• Link (it has an href): accent-text on a 10% accent tint, with its 1px edge in the same colour. Hover deepens the tint to 20%. The text is accent-text, not accent or lilac-dark: on the 20% hover tint over wash, accent falls to 4.31:1 and lilac-dark to 5.91:1, both under the 7:1 AAA asks of 14px text. accent-text (lilac-deep) holds 7.35:1 there, 8.47:1 at rest, and 8.52:1 and 9.92:1 over paper.
• A link that opens a new page (target="_blank") draws the external-link icon after its text, 16px and aria-hidden, and announces "opens in a new tab" through a hidden text. Give it rel="noopener noreferrer". A link that stays in the tab has no icon.
• Tag (no href): foreground text on the muted fill with a muted-foreground edge and no hover.

Accessibility

This section is still in progress.

Related

This section is still in progress.

References

This section is still in progress.