packages/pass/components/Layout/Badge/PillBadge.tsx

   1 import type { FC, ReactNode } from 'react';
   2
   3 import clsx from '@proton/utils/clsx';
   4
   5 type Props = {
   6     backgroundColor?: string;
   7     className?: string;
   8     color?: string;
   9     label: ReactNode;
  10 };
  11
  12 export const PillBadge: FC<Props> = ({
  13     backgroundColor = 'var(--interaction-norm)',
  14     className,
  15     color = 'var(--interaction-norm-contrast)',
  16     label,
  17 }) => (
  18     <div
  19         className={clsx('text-sm inline-block rounded-full text-normal inline-block px-2 py-0.5', className)}
  20         style={{ backgroundColor, color }}
  21     >
  22         {label}
  23     </div>
  24 );