Sr Only - react-md

The SrOnly component can be used to render accessible labels that are only visible to screen readers by default.

Simple Example

The most common usage for the SrOnly component is to add text to an icon button when a label cannot be provided by the aria-label.

Check out the Responsive Button demo to see how to switch from an icon button to a text button based on media queries.

import { Button } from "@react-md/core/button/Button";
import { SrOnly } from "@react-md/core/typography/SrOnly";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

export default function SimpleExample(): ReactElement {
  return (
    <Button buttonType="icon">
      <SrOnly>Example Text</SrOnly>
      <FavoriteIcon />
    </Button>
  );
}

import { Button } from "@react-md/core/button/Button";
import { SrOnly } from "@react-md/core/typography/SrOnly";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

export default function SimpleExample(): ReactElement {
  return (
    <Button buttonType="icon">
      <SrOnly>Example Text</SrOnly>
      <FavoriteIcon />
    </Button>
  );
}

Visible while Focused

The text can also become visible while focused if needed by enabling the focusable prop. Tab into the next demo to see the text.

import { SrOnly } from "@react-md/core/typography/SrOnly";
import { type ReactElement } from "react";

export default function VisibleWhileFocusedExample(): ReactElement {
  return <SrOnly focusable>This should appear while focused!</SrOnly>;
}

import { SrOnly } from "@react-md/core/typography/SrOnly";
import { type ReactElement } from "react";

export default function VisibleWhileFocusedExample(): ReactElement {
  return <SrOnly focusable>This should appear while focused!</SrOnly>;
}