Badge

Badges display the status of a given PayRun.

Draft

Ready to submit

Error

Done

<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
  <Badge type="draft" label="draft" />
  <InlineSpacer />
  <Badge type="pending" label="Ready to submit" />
  <InlineSpacer />
  <Badge type="error" label="error" />
  <InlineSpacer />
  <Badge type="success" label="done" />
  <InlineSpacer />
</View>

<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
  <Badge type="draft" label="draft" />
  <InlineSpacer />
  <Badge type="pending" label="Ready to submit" />
  <InlineSpacer />
  <Badge type="error" label="error" />
  <InlineSpacer />
  <Badge type="success" label="done" />
  <InlineSpacer />
</View>

label

string

required

style

object

type

"idle" │ "pending" │ "success" │ "error" │ "disabled"

required

Icons in Badges

The Badge component can show an icon, depending on the 'label' prop. Note that only a few icons are supported, but we can add more as needed.

<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
  <Badge type="pending" label="pending" />
</View>

<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
  <Badge type="pending" label="pending" />
</View>