VisuallyHidden

Hide element visually but keep it accessible for screen readers

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

VisuallyHidden is a utility component that hides content visually but leaves it available to screen readers.

For example, it can be used with ActionIcon component:

import { IconHeart } from '@tabler/icons-react';
import { ActionIcon, VisuallyHidden } from '@mantine/core';

function Demo() {
  return (
    <ActionIcon>
      <IconHeart />
      <VisuallyHidden>Like post</VisuallyHidden>
    </ActionIcon>
  );
}

Transition

Getting started

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on X Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on X