Badge

Display additional information through labels or status indicators

Use badges for providing quick, contextual information to your users, such as notification counts, status or activity indicators, labels, priority levels, or even turn them into interactive chips using their onClick prop.

Preview

Primary Secondary Flat Outline Info Success Warning Alert

---
import { Badge } from 'webcoreui/astro'
---

<Badge>Primary</Badge>
<Badge theme="secondary">Secondary</Badge>
<Badge theme="flat">Flat</Badge>
<Badge theme="outline">Outline</Badge>

<Badge theme="info">Info</Badge>
<Badge theme="success">Success</Badge>
<Badge theme="warning">Warning</Badge>
<Badge theme="alert">Alert</Badge>

<script>
    import { Badge } from 'webcoreui/svelte'
</script>

<Badge>Primary</Badge>
<Badge theme="secondary">Secondary</Badge>
<Badge theme="flat">Flat</Badge>
<Badge theme="outline">Outline</Badge>

<Badge theme="info">Info</Badge>
<Badge theme="success">Success</Badge>
<Badge theme="warning">Warning</Badge>
<Badge theme="alert">Alert</Badge>

import React from 'react'
import { Badge } from 'webcoreui/react'

const Component = () => (
    <React.Fragment>
        <Badge>Primary</Badge>
        <Badge theme="secondary">Secondary</Badge>
        <Badge theme="flat">Flat</Badge>
        <Badge theme="outline">Outline</Badge>

        <Badge theme="info">Info</Badge>
        <Badge theme="success">Success</Badge>
        <Badge theme="warning">Warning</Badge>
        <Badge theme="alert">Alert</Badge>
    </React.Fragment>
)

export default Component

Badge Styles

The appearance of badges can be modified with two props, small and rounded:

Small badges

Primary Secondary Outline Info Success Warning Alert

Small & rounded

Primary Secondary Outline Info Success Warning Alert

<Badge small={true}>Primary</Badge>
<Badge theme="secondary" small={true}>Secondary</Badge>
<Badge theme="outline" small={true}>Outline</Badge>

<Badge theme="info" small={true}>Info</Badge>
<Badge theme="success" small={true}>Success</Badge>
<Badge theme="warning" small={true}>Warning</Badge>
<Badge theme="alert" small={true}>Alert</Badge>

<Badge small={true} rounded={true}>Primary</Badge>
<Badge theme="secondary" small={true} rounded={true}>Secondary</Badge>
<Badge theme="outline" small={true} rounded={true}>Outline</Badge>

<Badge theme="info" small={true} rounded={true}>Info</Badge>
<Badge theme="success" small={true} rounded={true}>Success</Badge>
<Badge theme="warning" small={true} rounded={true}>Warning</Badge>
<Badge theme="alert" small={true} rounded={true}>Alert</Badge>

Hover Effects

You can set hover to true or add the onClick prop in Svelte or React to add hover effects to your badges. This is useful for interactive badges.

Primary Secondary Flat Outline Info Success Warning Alert

<Badge hover={true}>Primary</Badge>
<Badge theme="secondary" hover={true}>Secondary</Badge>
<Badge theme="flat" hover={true}>Flat</Badge>
<Badge theme="outline" hover={true}>Outline</Badge>

<Badge theme="info" hover={true}>Info</Badge>
<Badge theme="success" hover={true}>Success</Badge>
<Badge theme="warning" hover={true}>Warning</Badge>
<Badge theme="alert" hover={true}>Alert</Badge>

Badges with Icons

You can also pass the Icon component or your own icons to the Badge component to render them with icons:

Github Info Success Warning Alert

<Badge theme="secondary">
    <Icon type="github" size={15} /> Github
</Badge>

<Badge theme="info">
    <Icon type="info" size={15} /> Info
</Badge>

<Badge theme="success">
    <Icon type="circle-check" size={15} /> Success
</Badge>

<Badge theme="warning">
    <Icon type="warning" size={15} /> Warning
</Badge>

<Badge theme="alert">
    <Icon type="alert" size={15} /> Alert
</Badge>

Icon colors will always use the color of the text of the badge.

Interactive Badges

To make badges interactive, you can use the onClick prop for Svelte/React. For Astro, use the className prop to assign a custom class name to the element that you can target with document.querySelector, and add a click event listener using the native addEventListener method:

---
import { Badge } from 'webcoreui/astro'
---

<Badge hover={true} className="badge">Click me</Badge>

<script>
    document.querySelector('.badge').addEventListener('click', () => console.log('clicked'))
</script>

<script>
    import { Badge } from 'webcoreui/svelte'
</script>

<Badge onClick={() => console.log('clicked')}>Click me</Badge>

import React from 'react'
import { Badge } from 'webcoreui/react'

const Component = () => (
    <Badge onClick={() => console.log('clicked')}>Click me</Badge>
)

export default Component

Using event listeners, we can make badges removable similar to a Chip component:

---
import { Badge, Icon } from 'webcoreui/astro'
---

<Badge hover={true} small={true} rounded={true} className="badge">
    <Icon type="circle-close" /> Click to remove
</Badge>

<script>
    document.querySelector('.badge').addEventListener('click', event => {
        event.currentTarget.remove()
    })

    // For adding event listener to multiple badges
    Array.from(document.querySelectorAll('.badge')).forEach(badge => {
        badge.addEventListener('click', event => {
            event.currentTarget.remove()
        })
    })
</script>

<script>
    import { Badge } from 'webcoreui/svelte'
    import { circleClose } from 'webcoreui/icons'
</script>

<Badge
    small={true}
    rounded={true}
    onClick={event => event.currentTarget.remove()}
>
    {@html circleClose} Click to remove
</Badge>

import React from 'react'
import { Badge } from 'webcoreui/react'
import { circleClose } from 'webcoreui/icons'

const Component = () => (
    <Badge
        small={true}
        rounded={true}
        onClick={event => event.currentTarget.remove()}
        dangerouslySetInnerHTML={{ __html: `${circleClose} Click to remove` }}
    />
)

export default Component

API

type BadgeProps = {
    theme?: 'secondary'
        | 'outline'
        | 'flat'
        | 'info'
        | 'success'
        | 'warning'
        | 'alert'
    hover?: boolean
    small?: boolean
    rounded?: boolean
    className?: string
}

type SvelteBadgeProps = {
    onClick?: MouseEventHandler<HTMLButtonElement>
} & BadgeProps

type ReactBadgeProps = {
    onClick?: React.MouseEventHandler<HTMLButtonElement>
} & BadgeProps

Prop	Default	Purpose
`theme`	`-`	Sets the theme of the badge.
`hover`	`false`	Adds hover effects if the badge needs to be interactive. Use only for Astro components.
`small`	`false`	Sets the badge to a smaller size.
`rounded`	`false`	Sets the borders of the badge to rounded.
`className`	`-`	Pass additional CSS classes for the badge.

Svelte & React Prop	Purpose
`onClick`	Attach on-click event listeners. If set, `hover` is treated as `true`.

<- Avatar Banner ->

Request improvement for this page