Badge

A Badge is a visual label or indicator used to convey status, count, or categorize content. Badges are read-only status and are not interactive.

Code


                                                        
                                                        
                                                            <template>
                                                          <w-stack gap="small">
                                                            <w-badge type="neutral">
                                                              Neutral
                                                            </w-badge>
                                                            <w-badge type="info">
                                                              Info
                                                            </w-badge>
                                                            <w-badge type="success">
                                                              Success
                                                            </w-badge>
                                                            <w-badge type="warning">
                                                              Warning
                                                            </w-badge>
                                                            <w-badge type="danger">
                                                              Danger
                                                            </w-badge>
                                                          </w-stack>
                                                          <w-stack gap="small">
                                                            <w-badge type="neutral">
                                                              Neutral
                                                            </w-badge>
                                                            <w-badge type="info">
                                                              Info
                                                            </w-badge>
                                                            <w-badge type="success">
                                                              Success
                                                            </w-badge>
                                                            <w-badge type="warning">
                                                              Warning
                                                            </w-badge>
                                                            <w-badge type="danger">
                                                              Danger
                                                            </w-badge>
                                                          </w-stack>
                                                        </template>
                                                        
                                                        
                                                            

Props

Name

Description

Type

Default

Values

type

Types represent a semantic context that badge can be used for.

string

neutral

neutral | neutral-inverted | info | info-inverted | success | success-inverted | warning | warning-inverted | danger | danger-inverted

icon

Icon name for neutral, accent and info (and their inverted types) type only. Default icon for other types.

string, boolean

 

 

Slots

Name

Description

default

Default content slot