hp-visually-hidden

Content rendered inside this element is invisible on screen but readable by assistive tech — useful for icon-only buttons that need an accessible name, status announcements, or skip-to-main links that only appear on focus.

Examples

API

Intent

Changelog

Icon button with hidden label

The button below has no visible text but announces "search" to screen readers.

<body> <hp-button> <svg aria-hidden="true">…</svg> <hp-visually-hidden>Search</hp-visually-hidden> </hp-button> </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Slots

Slot	Description
`(default)`	Content for screen readers only

When to use

Wrap supplementary text that screen readers need but sighted users don't ("search", "remove tag", live region announcements).

Use to hide arbitrary content that shouldn't be announced — set aria-hidden="true" on the element directly, or skip the markup entirely.

No per-component entries in CHANGELOG.md yet.

Icon button with hidden label

Install

Slots

When to use

Contents