徽标
徽标用于显示紧凑的状态标记或小型计数。简单圆点使用 small 变体，数字标签使用 large 变体。
8
示例
默认
8
变体
3
最大值溢出
99+
参考
结构
| 元素 | 部件 | 选择器 |
|---|---|---|
<span> | root | [data-scope="badge"][data-part="root"]鼠标左键单击复制 |
<span> | label条件显示 | [data-scope="badge"][data-part="label"]鼠标左键单击复制 |
属性
| 名称 | 说明 | 默认值 | 控件 |
|---|---|---|---|
variant可选 | Visual size of the badge. smalllarge | "small" | |
content可选 | Content rendered inside large badges. string | number | undefined | undefined | - |
max可选 | Maximum number shown before using a "+" suffix. number | undefined | 999 | |
hidden可选 | Whether to hide the badge. boolean | undefined | false | |
ariaLabel可选 | Accessible label. Defaults to the resolved content for large badges. string | undefined | undefined |
插槽1
| 名称 | 参数 | 说明 |
|---|---|---|
default | - | Optional label content for large badges. |
样式7
| Token | 说明 |
|---|---|
--md-badge-container-shapeShape回退值 var(--md-badge-shape,var(--md-sys-shape-corner-full)) | Controls container shape. |
--md-badge-container-sizeLayout回退值 var(--md-badge-size,--dp(6)) | Controls container size. |
--md-badge-large-label-inline-paddingLayout回退值 --dp(4) | Controls large label inline padding. |
--md-badge-large-shapeShape回退值 var(--md-sys-shape-corner-full) | Controls large shape. |
--md-badge-large-sizeLayout回退值 --dp(16) | Controls large size. |
--md-badge-shapeShape回退值 var(--md-sys-shape-corner-full) | Controls shape. |
--md-badge-sizeLayout回退值 --dp(6) | Controls size. |