Skip to main content

Badge

Badges are compact labels used to communicate status, metadata, counts, or short actions.

Import

import { Badge } from '@vortexlabs/vortex';
import type { BadgeProps } from '@vortexlabs/vortex';

Display

<Badge>Badge</Badge>

Allied components

AvatarInteractive

Other links

Storybook
Component properties
PropTypeDefaultAttributes
children
React.ReactNode
No default value
type
union
fill
color
union
neutral
size
union
md
rounded
boolean
No default value
leftIcon
SVGIcon
No default value
rightIcon
SVGIcon
No default value
onlyIcon
SVGIcon
No default value
ariaLabel
string
No default value
hidden
boolean
No default value
onClose
function
No default value
closeAriaLabel
string
No default value
href
string
No default value
onClick
function
No default value
as
keyof React.JSX.IntrinsicElements
No default value
className
union
No default value
attributes
object
No default value

Badge.Frame

Component properties
PropTypeDefaultAttributes
children
React.ReactNode
No default value
position
union
top-end
overlap
boolean
No default value
className
union
No default value
attributes
object
No default value