Visually Hidden — Tamagui

Hide content thats visible to accessibility readers.

Features

Keeps content hidden on screen but visible to assistive tech.

Works with "space" prop to not disturb spacing.

Usage

Simply wrap the content you want hidden in VisuallyHidden:

import { VisuallyHidden, Text } from 'tamagui'

export default () => (
  <VisuallyHidden>
    <Text>Add annotations here</Text>
  </VisuallyHidden>
)

When using with the space property, it will avoid double-spacing:

import { H1, VisuallyHidden, Text, YStack } from 'tamagui'

export default () => (
  <YStack space>
    <H1>Title</H1>

    <VisuallyHidden>
      <Text>Add annotations here</Text>
    </VisuallyHidden>
  </YStack>
)

Previous

Anchor

Next

HTML Elements

Edit this page on GitHub.