---
title: 徽章 badge
toc: true
---
 
# 徽章

> 徽章 `badge` 通常作为修饰用途而存在，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。


<h2 id="badge" lay-toc="{}" style="margin-bottom: 0;">普通徽章</h2>

<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<span class="layui-badge">6</span>
<span class="layui-badge">99</span>
<span class="layui-badge">61728</span>
<span class="layui-badge">赤</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge layui-bg-green">绿</span>
<span class="layui-badge layui-bg-cyan">青</span>
<span class="layui-badge layui-bg-blue">蓝</span>
<span class="layui-badge layui-bg-black">深</span>
<span class="layui-badge layui-bg-gray">浅</span>
 
<hr class="ws-space-16">
 
边框徽章：
<span class="layui-badge-rim">6</span>
<span class="layui-badge-rim">Hot</span>
  </textarea>
</pre>


<h2 id="badge-dot" lay-toc="{}">小圆点</h2>

<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-gray"></span>
  </textarea>
</pre>


<h2 id="demo" lay-toc="{}">徽章的搭配</h2>

<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
  <textarea>
<button class="layui-btn">
  按钮甲
  <span class="layui-badge layui-bg-gray">1</span>
</button>
<button class="layui-btn">
  按钮乙
  <span class="layui-badge-dot layui-bg-orange"></span>
</button>
 
<hr class="ws-space-16">
 
<ul class="layui-nav" style="text-align: right;">
  <li class="layui-nav-item">
    <a href="">菜单甲<span class="layui-badge">9</span></a>
  </li>
  <li class="layui-nav-item">
    <a href="">菜单乙<span class="layui-badge-dot"></span></a>
  </li>
</ul>
 
<hr class="ws-space-16">
  
<div class="layui-tab layui-tab-brief">
  <ul class="layui-tab-title">
    <li class="layui-this">标签1</li>
    <li>标签2<span class="layui-badge-dot"></span></li>
    <li>标签3<span class="layui-badge">99+</span></li>
  </ul>
  <div class="layui-tab-content"></div>
</div>
  </textarea>
</pre>

徽章还可以自由佩戴在其他更多元素中，此处不做逐一列举。