VisuallyHidden

Use VisuallyHidden

VisuallyHidden is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Text, VisuallyHidden } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Text>Project updated.</Text><VisuallyHidden>Changes save automatically.</VisuallyHidden>
    </FloodRoot>
  );
}

Design notes

• Content remains in the accessibility tree. Default is for noninteractive text only.
• Use focusable for a skip link or another focusable descendant: the wrapper becomes visible while it contains focus. Supply visible focus styling on the actual control.
• This is not aria-hidden, display:none or a conditional unmount. as accepts span/div.
• Available in 0.2.4; use matching installed declarations.

API reference