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

Example

Icon-only button with accessible text

React

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

<Button iconOnly>
  <Icon
    as={faCheck}
    boxSize="1em"
  />

  <Invisible>Submit form</Invisible>
</Button>

Vue

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

<template>
  <Button icon-only>
    <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