StatusDot

Display an indicator of deployment status.

Default

code
<template>
  <PStack direction="col" class="px-2">
    <PStatusDot state="QUEUED" />
    <PStatusDot state="BUILDING" />
    <PStatusDot state="ERROR" />
    <PStatusDot state="READY" />
    <PStatusDot state="CANCELED" />
  </PStack>
</template>

Label

Set the label property to show the status text.

QueuedBuildingErrorReadyCanceled
code
<template>
  <PStack direction="col" class="px-2">
    <PStatusDot label state="QUEUED" />
    <PStatusDot label state="BUILDING" />
    <PStatusDot label state="ERROR" />
    <PStatusDot label state="READY" />
    <PStatusDot label state="CANCELED" />
  </PStack>
</template>

Custom Label Text

Or pass a string to the label to customize the text.

QuEuEdBuIlDiNgErRoRReDaYCaNcElEd
code
<template>
  <PStack direction="col" class="px-2">
    <PStatusDot label="QuEuEd" state="QUEUED" />
    <PStatusDot label="BuIlDiNg" state="BUILDING" />
    <PStatusDot label="ErRoR" state="ERROR" />
    <PStatusDot label="ReDaY" state="READY" />
    <PStatusDot label="CaNcElEd" state="CANCELED" />
  </PStack>
</template>