Invisible

The Invisible component is used to visually hide content while keeping it accessible to screen readers and other assistive technologies. This is useful for accessibility purposes, such as providing descriptive text for icon-only buttons.

Demo

React

Submit form

Vue

Submit form

Usage

React

import { Invisible } from '@fintech-sandpit/ui/react';
import { Button } from '@fintech-sandpit/ui/react';
import { Icon } from '@fintech-sandpit/ui/react';
import { faCheck } from '@fortawesome/free-solid-svg-icons';

// Icon-only button with accessible text
<Button>
  <Icon as={faCheck} boxSize="1em" />
  <Invisible>Submit form</Invisible>
</Button>

Vue

<script setup lang="ts">
import { Invisible } from '@fintech-sandpit/ui/vue';
import { Button } from '@fintech-sandpit/ui/vue';
import { Icon } from '@fintech-sandpit/ui/vue';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <!-- Icon-only button with accessible text -->
  <Button>
    <Icon :as="faCheck" box-size="1em" />
    <Invisible>Submit form</Invisible>
  </Button>
</template>

Props

React

Name	Type	Default	Description
asChild	boolean	false	Whether to render the invisible component as a child

Vue

Name	Type	Default	Description
as-child	boolean	false	Whether to render the invisible component as a child