Prism Docs

import { Badge } from '@mylighthouse/prism-react';

export default function BadgesDefault(): React.ReactElement {
  return (
    <div className="flex gap-300">
      <Badge>Neutral</Badge>

      <Badge type="info">Info</Badge>

      <Badge type="success">Success</Badge>

      <Badge type="danger">Danger</Badge>

      <Badge type="warning">Warning</Badge>

      <Badge type="intelligence">Intelligence</Badge>

      <Badge type="brand">Brand</Badge>

      <Badge type="unsafe_critical">Critical</Badge>
    </div>
  );
}

import { Badge } from '@mylighthouse/prism-react';

export default function BadgesIconsLeft(): React.ReactElement {
  return (
    <div className="flex gap-300">
      <Badge iconName="circle-information-filled" type="info">
        Icon
      </Badge>

      <Badge isSmall type="info">
        Small Badge
      </Badge>

      <Badge iconName="circle-information-filled" isSmall type="info">
        Small Badge With Icon
      </Badge>
    </div>
  );
}