Badge

Badges show the status of objects or confirmation of actions performed. They also create attention to elements. They are often used in tabular data.

  • Colors

    preview
    code
    <span class="gh-badge">Default</span>
<span class="gh-badge" data-color="primary">Primary</span>
<span class="gh-badge" data-color="secondary">Secondary</span>
<span class="gh-badge" data-color="tertiary">Tertiary</span>
<span class="gh-badge" data-color="accent">Accent</span>
<span class="gh-badge" data-color="danger">Danger</span>
<span class="gh-badge" data-color="success">Success</span>
    data
    [
  {
    "text": "Default",
    "color": ""
  },
  {
    "text": "Primary",
    "color": "primary"
  },
  {
    "text": "Secondary",
    "color": "secondary"
  },
  {
    "text": "Tertiary",
    "color": "tertiary"
  },
  {
    "text": "Accent",
    "color": "accent"
  },
  {
    "text": "Danger",
    "color": "danger"
  },
  {
    "text": "Success",
    "color": "success"
  }
]

  • Sizes

    preview
    code
    <span class="gh-badge" data-size="small">Small</span>
<span class="gh-badge">Default</span>
    data
    [
  {
    "text": "Small",
    "size": "small"
  },
  {
    "text": "Default",
    "size": ""
  }
]

  • With icon

    preview
    code
    <span class="gh-badge" data-icon="true" data-color="accent">Default<div class="gh-badge--icon">
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M4.575 9.0986C4.45 9.18194 4.32292 9.1861 4.19375 9.1111C4.06458 9.0361 4 8.9236 4 8.7736V3.1486C4 2.9986 4.06458 2.8861 4.19375 2.8111C4.32292 2.7361 4.45 2.74027 4.575 2.8236L9 5.6486C9.11667 5.7236 9.175 5.82777 9.175 5.9611C9.175 6.09444 9.11667 6.1986 9 6.2736L4.575 9.0986ZM4.75 8.0986L8.1125 5.9611L4.75 3.8236V8.0986Z" fill="currentColor" />
    </svg>
  </div>
</span>
    data
    [
  {
    "text": "Default",
    "color": "accent",
    "icon": "play"
  }
]