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

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

API

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

type SvelteBadgeProps = {
    onClick?: (() => any) | null
} & BadgeProps

type ReactBadgeProps = {
    onClick?: (() => any) | null
} & BadgeProps

Prop	Purpose
`theme`	Sets the theme of the badge. Defaults to `null`.
`hover`	Adds hover effects if the badge needs to be interactive. Defaults to `false`.
`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 Button ->

Request improvement for this page