Visibility

The Visibility component is used to conceal elements visually while still keeping them accessible in the DOM. This is just like .sr-only, but as a React component.

Basic Usage

import { Visibility } from '@krakentech/coral';
 
<Visibility>Children visible by default</Visibility>

Properties

hidden

When the hidden prop is set to true, the child elements will be visually hidden while remaining accessible in the DOM.

<Visibility hidden={true}>Children hidden visually</Visibility>

display

We expose the display prop, to enable functionality such as hiding responsively with display: none.

<Visibility display="none">Children not displayed</Visibility>

Responsiveness

<Visibility hidden={{ md: true }}>
    Children hidden visually at the md breakpoint
</Visibility>

Another example that is hidden by default and will be not hidden anymore starting at the md breakpoint.

<Visibility hidden={{ base: true, md: false }}>
    Children hidden visually by default and visible again at the md breakpoint
</Visibility>

Full API

AttributesProps: {
  'id': 'close-button',
  'aria-label': 'Close button',
  'data-testid': 'close-button'
};