Visually hidden

Hide content but keep it for screen readers.

import { BuiVisuallyHidden } from 'ng-blatui';

<span buiVisuallyHidden>Screen-reader only text</span>

Skip link

Press Tab — the hidden link appears on focus.

<!-- visible only on keyboard focus -->
<a href="#main" buiVisuallyHidden class="focus:not-sr-only focus:rounded-md focus:border focus:px-3 focus:py-1.5">
  Skip to content
</a>

API reference

Inputs

Prop	Type	Default	Description
`focusable`	`boolean`	`false`	Whether the content becomes visible when focused (e.g. skip links).

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.