Badge

React
import Badge from "@radui/ui/Badge"

const BadgeExample = () => (
    <div>
        <Badge>Badge</Badge>
    </div>
)

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 (default) badge uses a translucent tint of its color with vivid text.',
    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-950 font-light inline-block cursor-help">
                {variant}
              </Text>
            </TooltipWrapper>
          </span>
        ))}
      </div>
    </div>
  );
};

export default BadgeVariants;

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;

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;