Diamond Badge

A diamond-shaped badge for tags, statuses, and labels. Clipped with polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) and colored with the flat palette.

Preview

<script>
  import { DiamondBadge } from '@vultra/flat';
</script>

<div class="flex items-center gap-4">
  <DiamondBadge label="NEW" />
  <DiamondBadge label="PREMIUM" color="purple" size="lg" />
  <DiamondBadge label="SALE" color="green" size="sm" />
</div>

Usage

<script>
  import { DiamondBadge } from '@vultra/flat';
</script>

<DiamondBadge label="PRO" color="orange" size="md" />

Props

Prop	Type	Default	Description
label	string	—	Badge text
color	'red' \| 'blue' \| 'green' \| 'purple' \| 'pink' \| 'orange' \| 'teal'	'red'	Flat color variant
size	'sm' \| 'md' \| 'lg'	'md'	Badge size
class	string	undefined	Additional CSS classes

Install

npx @vultra/cli add flat-diamond-badge