Badge

Small status indicators and labels that can be attached to other elements.

Primary Badges

Neutral Blue Red Yellow Purple Green 
      <div class="flex flex-wrap gap-2">
    <pines-badge type="Primary" color="Neutral">Neutral</pines-badge>
    <pines-badge type="Primary" color="Blue">Blue</pines-badge>
    <pines-badge type="Primary" color="Red">Red</pines-badge>
    <pines-badge type="Primary" color="Yellow">Yellow</pines-badge>
    <pines-badge type="Primary" color="Purple">Purple</pines-badge>
    <pines-badge type="Primary" color="Green">Green</pines-badge>
  </div>

Secondary Badges

Neutral Blue Red Yellow Purple Green 
      <div class="flex flex-wrap gap-2">
    <pines-badge type="Secondary" color="Neutral">Neutral</pines-badge>
    <pines-badge type="Secondary" color="Blue">Blue</pines-badge>
    <pines-badge type="Secondary" color="Red">Red</pines-badge>
    <pines-badge type="Secondary" color="Yellow">Yellow</pines-badge>
    <pines-badge type="Secondary" color="Purple">Purple</pines-badge>
    <pines-badge type="Secondary" color="Green">Green</pines-badge>
  </div>

Outlined Badges

Neutral Blue Red Yellow Purple Green 
      <div class="flex flex-wrap gap-2">
    <pines-badge type="Outlined" color="Neutral">Neutral</pines-badge>
    <pines-badge type="Outlined" color="Blue">Blue</pines-badge>
    <pines-badge type="Outlined" color="Red">Red</pines-badge>
    <pines-badge type="Outlined" color="Yellow">Yellow</pines-badge>
    <pines-badge type="Outlined" color="Purple">Purple</pines-badge>
    <pines-badge type="Outlined" color="Green">Green</pines-badge>
  </div>