Search documentation v0.6.1

Badge

Display additional information through labels or status indicators

Source ↗️ Report Issue ↗️

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
How to use Badges in Astro
---
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>
How to use Badges in Svelte
<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>
How to use Badges in React
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
PropDefaultPurpose
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 PropPurpose
onClick Attach on-click event listeners. If set, hover is treated as true.

Request improvement for this page