<div class="flex flex-wrap gap-2">
  <Badge color="blue">Default</Badge>
  <Badge color="gray">Dark</Badge>
  <Badge color="red">Red</Badge>
  <Badge color="green">Green</Badge>
  <Badge color="yellow">Yellow</Badge>
  <Badge color="indigo">Indigo</Badge>
  <Badge color="purple">Purple</Badge>
  <Badge color="pink">Pink</Badge>
</div>

<div class="flex flex-wrap gap-2">
  <Badge color="blue" size="sm">Default</Badge>
  <Badge color="gray" size="sm">Dark</Badge>
  <Badge color="red" size="sm">Red</Badge>
  <Badge color="green" size="sm">Green</Badge>
  <Badge color="yellow" size="sm">Yellow</Badge>
  <Badge color="indigo" size="sm">Indigo</Badge>
  <Badge color="purple" size="sm">Purple</Badge>
  <Badge color="pink" size="sm">Pink</Badge>
</div>

<div class="flex flex-wrap gap-2">
  <Badge icon={HiCheckOutline}>2 minutes ago</Badge>
  <Badge color="gray" icon={HiClockSolid}>3 days ago</Badge>
</div>

<div class="flex flex-wrap items-center gap-2">
  <Badge icon={HiCheckOutline} />
  <Badge color="gray" icon={HiCheckOutline} />
  <Badge size="sm" icon={HiCheckOutline} />
  <Badge color="gray" size="sm" icon={HiCheckOutline} />
</div>