Misc elements

@summonware/ui · misc-elements · P2 · Core UI

Usage

The reference's "Micro Elements" page is a grab-bag with no shared theme beyond "too small to be their own component." Two pieces from it recur across the rest of this library and get a real home here: `Kbd` (a keyboard-shortcut hint, already used next to the site search trigger) and `VisuallyHidden` (screen-reader-only content, used throughout the form controls for labels that would be visually redundant).

import { Kbd, VisuallyHidden } from '@summonware/ui';

Best practices

DoUse `Kbd` for an actual keyboard shortcut the user can press, not as generic styled text.

Don'tReach for `display:none` or `visibility:hidden` for screen-reader-only text — both remove it from the accessibility tree too. `VisuallyHidden` keeps it announced while hiding it visually.

Examples

Common configurations, variations and states.

Keyboard shortcut hint

A real shortcut, paired with an accessible label a sighted user never sees.

Reference variants

0 of 10 labels from the reference are demonstrated above.

Colored links NEWText selection NEWLine height NEWPointer events NEWPosition values NEWBorderUtility classShadowsEmbedsAspect Ratios