Badges

Design Code

Variants

normal Error Success Warning Info
Normal Error Success Warning Info
Orange Pink Purple Indigo Blue
Orange Pink Purple Indigo Info
Blue-light Gray-blue Brand Gray
Blue-light Gray-blue Brand Gray
rounded
77+
Orange
Orange

HTML

Pink Pink Pink Pink Pink 
<nile-badge variant="pink">
Pink
</nile-badge>
<nile-badge variant="pink" rounded>
Pink
</nile-badge>
<nile-badge variant="pink"  pilltype="pill-outline">
        Pink
</nile-badge>
<nile-badge variant="pink"  pilltype="pill-color">
    Pink
</nile-badge>
<nile-badge variant="pink"  pilltype="badge-color">
    Pink
</nile-badge>

Attributes & Properties

Name Description Reflects Type Default
variant The button's theme variant. 'success'| 'normal'| 'warning'| 'error'| 'info'| 'gray'| 'brand'| 'blue-light'| 'blue'| 'indigo'| 'purple'| 'pink'| 'orange'| 'blue-gray'| 'gray-blue' 'normal'
rounded Draws a pill-style button with rounded edges. boolean false
pilltype For setting pill type. 'pill-color'| 'pill-outline'| 'badge-color' badge-color

Slots

Name Description
base The component's base wrapper
content The badge's content