Badges are used to display a small amount of information. They are used in the sidebar, and in the chat.

Badge
React
import Badge from "@radui/ui/Badge" const BadgeExample = () => ( <div> <Badge>Badge</Badge> </div> )
badge

solid

badge

soft

badge

surface

badge

outline

badge

ghost

React
import Text from '@radui/ui/Text'; import Separator from '@radui/ui/Separator'; import Badge from '@radui/ui/Badge'; import TooltipWrapper from '@/components/ui/Tooltip'; const BadgeVariants = () => { const badgeVariants = ['solid', 'soft', 'surface', 'outline', 'ghost'] as const; type BadgeVariant = typeof badgeVariants[number]; const badgestyleDescription: Record<BadgeVariant, string> = { solid: 'Solid badge uses the strongest fill for high-emphasis status.', soft: 'Soft badge uses a muted fill with no visible border.', surface: 'Surface badge sits on a panel with a subtle stroke and shadow.', outline: 'Outline badge keeps the fill transparent and emphasizes the border.', ghost: 'Ghost badge removes both fill and border for the lightest treatment.', }; return ( <div> <div className="flex items-center gap-4"> {badgeVariants.map((variant) => ( <span key={variant}> <Badge variant={variant} className="space-x-2"> <span>badge</span> </Badge> <Separator orientation="horizontal" style={{ marginTop: 20 }} /> <TooltipWrapper label={badgestyleDescription[variant]} placement="bottom"> <Text className="text-gray-800 font-light inline-block cursor-help"> {variant} </Text> </TooltipWrapper> </span> ))} </div> </div> ); }; export default BadgeVariants;
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
React
import Badge from '@radui/ui/Badge'; const BadgeSizes = () => { const sizes = ['small', 'medium', 'large', 'x-large'] as const; const variants = ['solid', 'soft', 'surface', 'outline', 'ghost'] as const; return <div className='flex flex-col gap-4'> {variants.map((variant, index) => { return <div key={index} className='flex items-center gap-4'> {sizes.map((size, index) => { return <Badge key={index} size={size} variant={variant}> <span>Badge</span> </Badge> })} </div> })} </div> } export default BadgeSizes;
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
React
import Badge from '@radui/ui/Badge'; const BadgeColor = () => { const sizes = ['small', 'medium', 'large', 'x-large'] as const; const variants = ['solid', 'soft', 'surface', 'outline', 'ghost'] as const; return <div className='flex flex-col gap-4'> {variants.map((variant, index) => { return <div key={index} className='flex items-center gap-4'> {sizes.map((size, index) => { return <Badge key={index} size={size} variant={variant} color='pink'>Badge</Badge> })} </div> })} </div> } export default BadgeColor;
PropTypeDefaultDescription

color

stringnullAccent color of the component

size

stringnullSize of the component

variant

stringnullVariant of the component