---
name: StatusPill
---

import { Playground, PropsTable } from 'docz'

import { StatusPill } from './status-pill.js'
import { DoczWrapper } from '../theme.js'

# StatusPill

## Properties

<PropsTable of={StatusPill} />

## Syching

<Playground>
  <DoczWrapper>
    {() =>
      <StatusPill
        progress={99.3}
        type='syncing'
      />
    }
  </DoczWrapper>
</Playground>

## Ready

<Playground>
  <DoczWrapper>
    {() =>
      <StatusPill
        progress={100.}
        type='ready'
      />
    }
  </DoczWrapper>
</Playground>


## With Error

<Playground>
  <DoczWrapper>
    {() =>
      <StatusPill
        progress={0.}
        type='error'
      />
    }
  </DoczWrapper>
</Playground>