Badge

<div class="badge solid success">badge</div>

<div className='badge solid success'>
  badge
</div>

<div class="badge solid success square">square</div>

<div className='badge solid success square'>
  square
</div>

<div class="badge solid success cornered">cornered</div>

<div className='badge solid success cornered'>
  cornered
</div>

<div class="badge solid success">success</div>

<div className='badge solid success'>
  success
</div>

<div class="badge outline success">success</div>

<div className='badge outline success'>
  success
</div>

<div class="badge light success">success</div>

<div className='badge light success'>
  success
</div>

<div class="grid gap-4">
	<div class="badge solid success xs">size-xs</div>
	<div class="badge solid success sm">size-sm</div>
	<div class="badge solid success md">size-md</div>
	<div class="badge solid success lg">size-lg</div>
	<div class="badge solid success xl">size-xl</div>
</div>

<div className='grid gap-4'>
  <div className='badge solid success xs'>
    size-xs
  </div>
  <div className='badge solid success sm'>
    size-sm
  </div>
  <div className='badge solid success md'>
    size-md
  </div>
  <div className='badge solid success lg'>
    size-lg
  </div>
  <div className='badge solid success xl'>
    size-xl
  </div>
</div>

<div class="grid gap-4">
	<div class="badge light danger">
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="icon icon-tabler icon-tabler-bell-plus-filled"
			width="15"
			height="15"
			viewBox="0 0 24 24"
			stroke-width="2"
			stroke="currentColor"
			fill="none"
			stroke-linecap="round"
			stroke-linejoin="round"
		>
			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
			<path
				d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z"
				stroke-width="0"
				fill="currentColor"
			/>
			<path
				d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004zm0 6a1 1 0 0 0 -1 1v1h-1l-.117 .007a1 1 0 0 0 .117 1.993h1v1l.007 .117a1 1 0 0 0 1.993 -.117v-1h1l.117 -.007a1 1 0 0 0 -.117 -1.993h-1v-1l-.007 -.117a1 1 0 0 0 -.993 -.883z"
				stroke-width="0"
				fill="currentColor"
			/>
		</svg>
		<p>Left Icon Badge</p>
	</div>
</div>

<div className='grid gap-4'>
  <div className='badge light danger'>
    <svg xmlns='http://www.w3.org/2000/svg'
      className='icon icon-tabler icon-tabler-bell-plus-filled'
      width='15'
      height='15'
      viewBox='0 0 24 24'
      strokeWidth='2'
      stroke='currentColor'
      fill='none'
      strokeLinecap='round'
      strokeLinejoin='round'>
      <path stroke='none'
        d='M0 0h24v24H0z'
        fill='none' />
      <path d='M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z'
        strokeWidth='0'
        fill='currentColor' />
      <path d='M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004zm0 6a1 1 0 0 0 -1 1v1h-1l-.117 .007a1 1 0 0 0 .117 1.993h1v1l.007 .117a1 1 0 0 0 1.993 -.117v-1h1l.117 -.007a1 1 0 0 0 -.117 -1.993h-1v-1l-.007 -.117a1 1 0 0 0 -.993 -.883z'
        strokeWidth='0'
        fill='currentColor' />
    </svg>
    <p>
      Left Icon Badge
    </p>
  </div>
</div>