Badge - JS + CSS

Badge

Struktur HTML


<span class="ina-badge ina-badge--soft ina-badge--brand ina-badge--md ina-badge--rounded-full">Brand</span>

Contoh Penggunaan

Variasi Badge

Brand Info Warning Success Error Neutral

<div class="p-5 flex flex-col gap-4">
  <div class="flex items-center gap-3 flex-wrap">
    <span class="ina-badge ina-badge--soft ina-badge--brand ina-badge--md ina-badge--rounded-full">
      Brand
    </span>
    <span class="ina-badge ina-badge--soft ina-badge--info ina-badge--md ina-badge--rounded-full">
      Info
    </span>
    <span
      class="ina-badge ina-badge--soft ina-badge--warning ina-badge--md ina-badge--rounded-full"
    >
      Warning
    </span>
    <span
      class="ina-badge ina-badge--soft ina-badge--success ina-badge--md ina-badge--rounded-full"
    >
      Success
    </span>
    <span class="ina-badge ina-badge--soft ina-badge--error ina-badge--md ina-badge--rounded-full">
      Error
    </span>
    <span
      class="ina-badge ina-badge--soft ina-badge--neutral ina-badge--md ina-badge--rounded-full"
    >
      Neutral
    </span>
  </div>
  <div class="flex items-center gap-3 flex-wrap">
    <span class="ina-badge ina-badge--fill ina-badge--brand ina-badge--md ina-badge--rounded-full">
      Brand
    </span>
    <span class="ina-badge ina-badge--fill ina-badge--info ina-badge--md ina-badge--rounded-full">
      Info
    </span>
    <span
      class="ina-badge ina-badge--fill ina-badge--warning ina-badge--md ina-badge--rounded-full"
    >
      Warning
    </span>
    <span
      class="ina-badge ina-badge--fill ina-badge--success ina-badge--md ina-badge--rounded-full"
    >
      Success
    </span>
    <span class="ina-badge ina-badge--fill ina-badge--error ina-badge--md ina-badge--rounded-full">
      Error
    </span>
    <span
      class="ina-badge ina-badge--fill ina-badge--neutral ina-badge--md ina-badge--rounded-full"
    >
      Neutral
    </span>
  </div>
</div>

Ukuran Badge

Small Medium

<div class="p-5 flex flex-col gap-4">
  <div class="flex items-center gap-3 flex-wrap">
    <span class="ina-badge ina-badge--fill ina-badge--info ina-badge--sm ina-badge--rounded-full">
      Small
    </span>
    <span class="ina-badge ina-badge--fill ina-badge--info ina-badge--md ina-badge--rounded-full">
      Medium
    </span>
  </div>
</div>