HDS Utility Text Buttons

[abbybowman]

Feature name

Component: Text label + small icon circle (not a filled rectangular button)

Feature area

Component patterns (cards, search, archive layouts, etc.)

Describe the idea

Utility buttons come in light and dark color themes that match their background, making them more subtle than Primary and Secondary buttons. Utility buttons can be a circled icon only, such as arrows that control a carousel, or include text for actions like opening and closing accordion panels.

Use case / user story

As a dev building out a UI for a more complex web app, I want to use consistent utility buttons to match other HDS sites, but it's not easy to cleanly build them out from the HDS Core elements present today (glyphs and traditional/USWDS-style buttons)

Primary audience

All of the above

Is this already in the HDS Figma library?

✅ Yes — fully specced in HDS Figma

Figma reference

No response

Implementation maturity

✅ Production — already running on a live NASA site or project

Prior art details

No response

Relationship to USWDS

Extends USWDS with something it doesn't provide

Potential breaking change?

No — purely additive

Alternatives considered

No response

Additional context

Notes for future build:

• Figma shows: "BUTTON TEXT" (uppercase, likely label/eyebrow treatment) with a small icon circle on the right
• Appears on both light and dark backgrounds — text and icon adapt
• The icon circle looks like it reuses the existing .hds-btn-icon--sm size
• Key question: Is this a new class (.hds-btn--utility-text) or a composition pattern (label text + .hds-btn-icon--utility.hds-btn-icon--sm)?
• If new class: needs flex container, gap between text and icon, shared hover state across both elements
• The "Playing" state (pause icon, filled circle) suggests this pattern also handles toggle states — document which icon swaps are expected
• Test with varying text lengths

Would you contribute to this?

Yes — I could submit a PR