Badge Badges are used to highlight an item's status for quick recognition.
Import copy import { Badge } from '@trendmicro/react-styled-ui' ;
Usage Basic badge To display the badge on the top-right corner of the wrapped component, specify the badgeContent prop with the desired content.
EDITABLE EXAMPLE
copy < Grid
columnGap = " 8x "
justifyItems = " center "
rowGap = " 8x "
templateColumns = " repeat(5,1fr) "
width = " min-content "
>
< Badge >
< Icon icon = " alert " />
</ Badge >
< Badge badgeContent = { 0 } >
< Icon icon = " alert " />
</ Badge >
< Badge badgeContent = { 5 } >
< Icon icon = " alert " />
</ Badge >
< Badge badgeContent = " 99+ " >
< Icon icon = " alert " />
</ Badge >
< Badge
badgeContent = { < Text fontFamily = " mono " fontSize = " xs " > ! </ Text > }
>
< Icon icon = " alert " />
</ Badge >
< Badge >
< Skeleton variant = " rect " borderRadius = " sm " width = " 8x " height = " 8x " />
</ Badge >
< Badge badgeContent = { 0 } >
< Skeleton variant = " rect " borderRadius = " sm " width = " 8x " height = " 8x " />
</ Badge >
< Badge badgeContent = { 5 } >
< Skeleton variant = " rect " borderRadius = " sm " width = " 8x " height = " 8x " />
</ Badge >
< Badge badgeContent = " 99+ " >
< Skeleton variant = " rect " borderRadius = " sm " width = " 8x " height = " 8x " />
</ Badge >
< Badge
badgeContent = { < Text fontFamily = " mono " fontSize = " xs " > ! </ Text > }
>
< Skeleton variant = " rect " borderRadius = " sm " width = " 8x " height = " 8x " />
</ Badge >
</ Grid >
Dot badge Use variant="dot" to change a badge into a small dot. This can be used as a notification that something has changed without giving a count.
EDITABLE EXAMPLE
copy < Stack direction = " row " spacing = " 8x " shouldWrapChildren >
// Pass `isInvisible` to make it invisible
< Badge variant = " dot " isInvisible >
< Icon icon = " alert " />
</ Badge >
< Badge variant = " dot " >
< Icon icon = " alert " />
</ Badge >
< Badge variant = " dot " width = " 3x " height = " 3x " >
< Icon icon = " alert " />
</ Badge >
</ Stack >
Standalone badge The badge can be used as a standalone component. This can be useful for displaying a badge without a surrounding element.
EDITABLE EXAMPLE
copy < Stack direction = " row " spacing = " 8x " alignItems = " center " >
< Badge variant = " dot " />
< Badge variant = " solid " badgeContent = { 0 } />
< Badge variant = " solid " badgeContent = { 5 } />
< Badge variant = " solid " badgeContent = " 99+ " />
< Badge variant = " solid " badgeContent = { < Icon icon = " virus " size = " 4x " /> } height = " 6x " />
</ Stack >
Badge alignment You can use the placement prop to move the badge to any corner of the wrapped element. The default placement is top-right. The placement prop can be one of top-left, top-right, bottom-left, bottom-right.
EDITABLE EXAMPLE
copy < Grid
columnGap = " 8x "
rowGap = " 8x "
templateColumns = " 1fr 1fr "
width = " min-content "
>
< Badge placement = " top-left " badgeContent = { 1 } >
< Icon icon = " alert " />
</ Badge >
< Badge placement = " top-right " badgeContent = { 1 } >
< Icon icon = " alert " />
</ Badge >
< Badge placement = " bottom-left " badgeContent = { 1 } >
< Icon icon = " alert " />
</ Badge >
< Badge placement = " bottom-right " badgeContent = { 1 } >
< Icon icon = " alert " />
</ Badge >
</ Grid >
Badge visibility The badge visibility can be controlled using the isInvisible prop.
EDITABLE EXAMPLE
copy function Example ( ) {
const [ count , setCount ] = React . useState ( 1 ) ;
const [ isInvisible , setIsInvisible ] = React . useState ( false ) ;
return (
< Stack direction = " column " spacing = " 8x " >
< Flex align = " center " >
< Box mr = " 8x " >
< Badge badgeContent = { count } isInvisible = { ! ( count > 0 ) } >
< Icon icon = " alert " />
</ Badge >
</ Box >
< ButtonGroup
variant = " secondary "
>
< Button
aria-label = " decrease "
onClick = { ( ) => {
setCount ( Math . max ( count - 1 , 0 ) ) ;
} }
>
< Icon icon = " minus " />
</ Button >
< Button
aria-label = " increase "
onClick = { ( ) => {
setCount ( Math . max ( count + 1 , 0 ) ) ;
} }
>
< Icon icon = " add " />
</ Button >
</ ButtonGroup >
</ Flex >
< Flex alignItems = " center " >
< Box mr = " 8x " >
< Badge
variant = " dot "
isInvisible = { isInvisible }
>
< Icon icon = " alert " />
</ Badge >
</ Box >
< TextLabel cursor = " pointer " >
< Flex align = " center " >
< Switch
size = " md "
checked = { ! isInvisible }
onChange = { ( ) => {
setIsInvisible ( ! isInvisible ) ;
} }
/>
< Space width = " 2x " />
< Text userSelect = " none " > Show Badge </ Text >
</ Flex >
</ TextLabel >
</ Flex >
</ Stack >
) ;
}
Color The color of the badge can be changed by passing the backgroundColor prop. See the colors section to learn more about colors.
EDITABLE EXAMPLE
copy function Example ( ) {
const colors = [
'red:60' ,
'orange:50' ,
'yellow:50' ,
'green:60' ,
'blue:60' ,
'gray:60' ,
'magenta:60' ,
'purple:60' ,
'teal:60' ,
'cyan:60' ,
] ;
return (
< Stack direction = " row " spacing = " 8x " shouldWrapChildren >
{ colors . map ( color => (
< Badge key = { color } backgroundColor = { color } badgeContent = { 5 } >
< Skeleton variant = " rect " borderRadius = " sm " width = " 8x " height = " 8x " />
</ Badge >
) ) }
</ Stack >
) ;
}
Size The size of the badge can be changed by passing the height and minWidth props.
EDITABLE EXAMPLE
copy < Stack direction = " row " spacing = " 8x " shouldWrapChildren >
< Badge badgeContent = { 5 } height = " 4x " minWidth = " 4x " fontSize = " xs " >
< Skeleton variant = " rect " borderRadius = " sm " width = " 8x " height = " 8x " />
</ Badge >
< Badge badgeContent = { 5 } height = " 5x " minWidth = " 5x " fontSize = " sm " >
< Skeleton variant = " rect " borderRadius = " sm " width = " 8x " height = " 8x " />
</ Badge >
< Badge badgeContent = { 5 } height = " 6x " minWidth = " 6x " fontSize = " md " >
< Skeleton variant = " rect " borderRadius = " sm " width = " 8x " height = " 8x " />
</ Badge >
</ Stack >
Customization You can customize the badge style by passing style props. See the following example to learn how to create a outline badge.
EDITABLE EXAMPLE
copy const OutlineBadge = React . forwardRef ( ( props , ref ) => {
const [ colorMode ] = useColorMode ( ) ;
const backgroundColor = {
dark : 'gray:100' ,
light : 'white' ,
} [ colorMode ] ;
const borderColor = {
dark : 'yellow:50' ,
light : 'yellow:50' ,
} [ colorMode ] ;
const borderStyle = 'solid' ;
const borderWidth = '2px' ;
const color = {
dark : 'white:primary' ,
light : 'black:primary' ,
} [ colorMode ] ;
const height = '5x' ;
const minWidth = '5x' ;
return (
< Badge
ref = { ref }
backgroundColor = { backgroundColor }
borderColor = { borderColor }
borderStyle = { borderStyle }
borderWidth = { borderWidth }
color = { color }
height = { height }
minWidth = { minWidth }
{ ... props }
/>
) ;
} ) ;
function Example ( ) {
return (
< Grid
columnGap = " 8x "
justifyItems = " center "
rowGap = " 8x "
templateColumns = " repeat(3,1fr) "
width = " min-content "
>
< OutlineBadge badgeContent = { 0 } >
< Skeleton variant = " rect " borderRadius = " sm " width = " 8x " height = " 8x " />
</ OutlineBadge >
< OutlineBadge badgeContent = " 99+ " >
< Skeleton variant = " rect " borderRadius = " sm " width = " 8x " height = " 8x " />
</ OutlineBadge >
< OutlineBadge
badgeContent = { < Text fontFamily = " mono " fontSize = " xs " > ! </ Text > }
>
< Skeleton variant = " rect " borderRadius = " sm " width = " 8x " height = " 8x " />
</ OutlineBadge >
</ Grid >
) ;
}
render ( < Example /> ) ;
Props Name Type Default Description badgeContent node | number | string The badge content. isInvisible boolean Whether the badge is invisible. placement string 'top-right' The placement of the badge. One of: 'top-left', 'top-right', 'bottom-left', 'bottom-right'. variant string 'solid' One of: 'solid', 'dot'
