Badge

The Badge component displays compact elements that represent an input, attribute, or action. Supports different colors, sizes, and interactive features like removal. Inner label accepts the full Text-prop API via labelProps.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁶⁾

Properties

⁽³¹⁾

Playground

Basics

Wrap any label in a Badge to render a compact tag — the default filled variant and primary color apply automatically.

Loading demo…

import
 
{
 
Badge
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
gap
=
{
8
}
 
wrap
=
"wrap"
>
      
<Badge
>
New
</Badge
>
      
<Badge
>
Beta
</Badge
>
      
<Badge
>
v1
.
0
</Badge
>
    
</Row
>
  
)
}

Semantic colors

Set the color prop to tokens such as primary, success, warning, error, or gray to align Badges with semantic meaning instead of hard-coded hex values.

Loading demo…

import
 
{
 
Badge
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
gap
=
{
8
}
 
wrap
=
"wrap"
>
      
<Badge
 
color
=
"primary"
>
Primary
</Badge
>
      
<Badge
 
color
=
"success"
>
Success
</Badge
>
      
<Badge
 
color
=
"warning"
>
Warning
</Badge
>
      
<Badge
 
color
=
"error"
>
Error
</Badge
>
      
<Badge
 
color
=
"gray"
>
Gray
</Badge
>
    
</Row
>
  
)
}

Size scale

Adjust the size prop (xs through 3xl, or a number) to match the density of the surrounding UI.

Loading demo…

import
 
{
 
Badge
,
 
Block
,
 
Row
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
SIZES
 
=
 
[
'xs'
,
 
'sm'
,
 
'md'
,
 
'lg'
,
 
'xl'
,
 
'2xl'
,
 
'3xl'
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
align
=
"center"
 
gap
=
"lg"
 
wrap
=
"wrap"
>
      
{
SIZES
.
map
(
(
size
)
 
=>
 
(
        
<Block
 
key
=
{
size
}
 
align
=
"center"
>
          
<Badge
 
size
=
{
size
}
>
Badge
</Badge
>
          
<Text
 
variant
=
"small"
>
{
size
}
</Text
>
        
</Block
>
      
)
)
}
    
</Row
>
  
)
;
}

Variant styles

Pick a variant like filled, outline, light, subtle, or gradient when you need to shift emphasis without changing the Badge content.

Loading demo…

import
 
{
 
Badge
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
gap
=
{
8
}
 
wrap
=
"wrap"
>
      
<Badge
 
variant
=
"filled"
>
Filled
</Badge
>
      
<Badge
 
variant
=
"outline"
>
Outline
</Badge
>
      
<Badge
 
variant
=
"light"
>
Light
</Badge
>
      
<Badge
 
variant
=
"subtle"
>
Subtle
</Badge
>
      
<Badge
 
variant
=
"gradient"
>
Gradient
</Badge
>
    
</Row
>
  
)
}

Shadow depth

Use the shadow prop (none through xl) to raise a Badge when it needs extra emphasis over surrounding UI.

Loading demo…

import
 
{
 
Badge
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Row
 
gap
=
{
8
}
 
wrap
=
"wrap"
>
      
<Badge
 
shadow
=
"none"
>
No
 
Shadow
</Badge
>
      
<Badge
 
shadow
=
"xs"
>
XS
 
Shadow
</Badge
>
      
<Badge
 
shadow
=
"sm"
>
SM
 
Shadow
</Badge
>
      
<Badge
 
shadow
=
"md"
>
MD
 
Shadow
</Badge
>
      
<Badge
 
shadow
=
"lg"
>
LG
 
Shadow
</Badge
>
      
<Badge
 
shadow
=
"xl"
>
XL
 
Shadow
</Badge
>
    
</Row
>
  
)
}

Prop aliases

Shorthand props v and c mirror variant and color, so you can write more compact JSX without losing any functionality.

Loading demo…

import
 
{
 
Badge
,
 
Block
,
 
Row
 
}
 
from
 
'@platform-blocks/react-ui-library'
 
const
 badges 
=
 
[
  
{
 label
:
 
'Primary Filled'
,
 variant
:
 
'filled'
,
 color
:
 
'primary'
 
}
,
  
{
 label
:
 
'Secondary Outline'
,
 variant
:
 
'outline'
,
 color
:
 
'secondary'
 
}
,
  
{
 label
:
 
'Success Light'
,
 variant
:
 
'light'
,
 color
:
 
'success'
 
}
,
  
{
 label
:
 
'Warning Subtle'
,
 variant
:
 
'subtle'
,
 color
:
 
'warning'
 
}
,
]
 as 
const
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
<Row
 
gap
=
"sm"
 
wrap
=
"wrap"
>
        
{
badges
.
map
(
(
badge
)
 
=>
 
(
          
<Badge
            
key
=
{
`full-${badge.label}`
}
            
variant
=
{
badge
.
variant
}
            
color
=
{
badge
.
color
}
          
>
            
{
badge
.
label
}
          
</Badge
>
        
)
)
}
      
</Row
>
 
      
<Row
 
gap
=
"sm"
 
wrap
=
"wrap"
>
        
{
badges
.
map
(
(
badge
)
 
=>
 
(
          
<Badge
 
key
=
{
`alias-${badge.label}`
}
 
v
=
{
badge
.
variant
}
 
c
=
{
badge
.
color
}
>
            
{
badge
.
label
}
          
</Badge
>
        
)
)
}
      
</Row
>
    
</Block
>
  
)
}

Scan to open this page on your phonereact-ui-library.com/components/Badge

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap