Placeholder

The Placeholder component displays a content placeholder with customizable size and height.

Demo

React

VariantSubtleSolid

Text

A placeholder block

Vue

VariantSubtleSolid

Text

A placeholder block

Usage

React

import { Placeholder } from '@fintech-sandpit/ui/react';

return (
  <Placeholder
    variant="solid"
    className="h-20"
  >
    A placeholder block
  </Placeholder>
);

Vue

<script setup lang="ts">
import { Placeholder } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Placeholder
    variant="solid"
    class="h-20"
  >
    A placeholder block
  </Placeholder>
</template>

Props

Name	Type	Default	Description
variant	PlaceholderVariant	subtle	Variant of the placeholder

Types

type PlaceholderVariant = 'subtle' | 'solid'