badge

primarysuccessdangerwarning

each primary in ['primary', 'success', 'danger', 'warning']
    span.na-badge(data-primary=primary)= primary

## `data-processing`

processing

span.na-badge(data-processing style="font-size: 16px") processing

## custom style

全局变量 --color-badge 可以自定义圆点和波纹颜色RGB值
全局变量 --weight-badge-processing 调整波浪大小
全局变量 --indent-badge 调整文字左内边距
这原本是用 text-indent 属性实现，但是在Safari中使用 ::before 的元素不支持 text-indent

debug

span.na-badge(data-processing data-primary="danger" style={
    "--indent-badge": "30px",
    "font-size": "20px",
    "--weight-badge-processing": "6px",
    "--color-badge": "var(--primary-7)"
})
    span.na-code.na-font-mono debug

全局变量 --margin-badge 圆点的边距，可以用来反向调整圆点大小

span.na-tag(data-primary="danger" style={
    "--indent-badge": "30px",
    "--margin-badge": "6px",
    "border-style": "dashed"
})
    span.na-badge(data-processing)
        svg(
            role="img"
            aria-label="bug"
            width=30
            height=30
            style="vertical-align: middle"
        )

badge

## data-processing

## custom style

## `data-processing`