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 component
import {
  Button,
  Icon,
  Invisible,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/icon.css';
import '@fintech-sandpit/ui/style/components/invisible.css';
// Import icons
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 component
import {
  Button,
  Icon,
  Invisible,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/icon.css';
import '@fintech-sandpit/ui/style/components/invisible.css';
// Import icons
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	Use the provided child element as the default rendered element, combining their props and behavior

Vue

Name	Type	Default	Description
as-child	boolean	false	Use the provided child element as the default rendered element, combining their props and behavior