---
name: Placeholder
menu: Components
route: /components/placeholder
---

import { Playground, PropsTable } from 'docz'
import { Form, Placeholder } from '@personio/ui-components'
import { State, Toggle } from 'react-powerplug'
import './placeholder.scss'

# Placeholder

<PropsTable of={Placeholder} />

## Text Placeholder

<Playground>
  <div className="placeholder-container">
    <Placeholder.Text repeat={5} />
  </div>
</Playground>

## Block Placeholder

<Playground>
  <div className="placeholder-container">
    <Placeholder.Block repeat={5} />
  </div>
</Playground>

## Custom Placeholder

<Playground>
  <div className="placeholder-container">
    <Placeholder
      repeat={3}
      height={19}
      color="#E6E6E6"
    />
  </div>
</Playground>