Badge

const Preview = () => {
  return <Badge count={15} maxCount={9} />;
};

render(<Preview />)

const Variants = () => {
  const VariantsMap: {
    [key: string]: { [key: string]: string };
  } = {
    neutralBase: {
      'data-color': 'neutral',
    },
    neutralTinted: {
      'data-color': 'neutral',
      variant: 'tinted',
    },
    dangerBase: {
      'data-color': 'danger',
    },
    dangerTinted: {
      'data-color': 'danger',
      variant: 'tinted',
    },
    infoBase: {
      'data-color': 'info',
    },
    infoTinted: {
      'data-color': 'info',
      variant: 'tinted',
    },
    warningBase: {
      'data-color': 'warning',
    },
    warningTinted: {
      'data-color': 'warning',
      variant: 'tinted',
    },
  };
  return (
    <>
      {Object.entries(VariantsMap).map(([key, value]) => (
        <Badge key={key} {...value} count={15} maxCount={9} />
      ))}
    </>
  );
};

render(<Variants />)

const InTabs = () => (
  <Tabs defaultValue='value1'>
    <Tabs.List>
      <Tabs.Tab value='value1'>
        Favoritter
        <Badge count={64} maxCount={10} data-color='neutral' />
      </Tabs.Tab>
      <Tabs.Tab value='value2'>Arkiv</Tabs.Tab>
      <Tabs.Tab value='value3'>
        Nylige
        <Badge count={2} data-color='neutral' />
      </Tabs.Tab>
    </Tabs.List>
    <Tabs.Panel value='value1'>content 1</Tabs.Panel>
    <Tabs.Panel value='value2'>content 2</Tabs.Panel>
    <Tabs.Panel value='value3'>content 3</Tabs.Panel>
  </Tabs>
);

render(<InTabs />)

const Floating = () => (
  <>
    <Badge.Position placement='top-right'>
      <Badge data-color='danger' count={2}></Badge>
      <EnvelopeClosedFillIcon title='Meldinger' style={{ fontSize: '2rem' }} />
    </Badge.Position>
  </>
);

render(<Floating />)

const Bullet = () => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem' }}>
    <Badge data-color='success' style={{ display: 'inline-flex' }} />
    Aktiv
  </div>
);

render(<Bullet />)