# Badge > 一个对正文进行补充的小标签。 ## 总览 `nly-badge` 组件在一般情况下，大小由父元素或者以上的元素决定的。 ```html

info

info

info

info

``` ## size `nly-badge` 提供了一个设置 badge 大小的 props size 请注意这时候可能会由于与文本内容或者同级元素的 `font-size` 和 `line-height` 不同而导致并不会对齐显示 ```html xs sm md lg xl ``` ## pill 默认 `badge` 是小圆角形，设置 `pill` 之后，变成大圆角 ```html xs sm md lg xl ``` ## tag 可以给 `badge` 设置 `tag` 标签。 ```html a div button ``` ## variant `badge-*` 类颜色，默认无颜色， `badge-*` 类支持外边框， 可以设置 prop `outline` 类渲染外边框， prop `dashed` 渲染虚线外边框 ### 默认颜色 ```html primary secondary success info warning danger dark light ``` ### outline 设置 prop `outline` 为实线边框式样 ```html primary secondary success info warning danger dark light ``` #### dashed 在设置 `outline` 为 `true` 的情况下，可以设置 `dashed` 为 `true` 来渲染成虚线边框 ```html primary secondary success info warning danger dark light ``` ## bg-variant `bg-*` 类背景色 ```html light dark primary secondary success info warning danger lightblue navy olive lime fuchsia maroon blue indigo purple pink red orange yellow green teal cyan white gray graydark ``` ## bg-gradient-variant `bg-gradient-*` 渐变色背景色 ```html light dark primary secondary success info warning danger lightblue navy olive lime fuchsia maroon blue indigo purple pink red orange yellow green teal cyan white gray graydark ```