徽章

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

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

<div class="badge solid info square">方形徽章</div>

<div className='badge solid info square'>
  方形徽章
</div>

<div class="badge solid success cornered">带有些微圆角的徽章</div>

<div className='badge solid success cornered'>
  带有些微圆角的徽章
</div>

<div class="badge solid danger">实体徽章</div>

<div className='badge solid danger'>
  实体徽章
</div>

<div class="badge outline info">轮廓徽章</div>

<div className='badge outline info'>
  轮廓徽章
</div>

<div class="badge light success">轻量徽章</div>

<div className='badge light success'>
  轻量徽章
</div>

<div class="grid gap-4">
	<div class="badge solid success xs">尺寸-xs</div>
	<div class="badge solid warn sm">尺寸-sm</div>
	<div class="badge solid info md">尺寸-md</div>
	<div class="badge solid danger lg">尺寸-lg</div>
	<div class="badge solid success xl">尺寸-xl</div>
</div>

<div className='grid gap-4'>
  <div className='badge solid success xs'>
    尺寸-xs
  </div>
  <div className='badge solid warn sm'>
    尺寸-sm
  </div>
  <div className='badge solid info md'>
    尺寸-md
  </div>
  <div className='badge solid danger lg'>
    尺寸-lg
  </div>
  <div className='badge solid success xl'>
    尺寸-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>图标徽章</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>
      图标徽章
    </p>
  </div>
</div>