Insignă

import { Badge } from 'twenty-ui/primitives/data-display';

export const PreviewLabel = () => <Badge>Preview</Badge>;

import { Badge } from 'twenty-ui/primitives/data-display';
import { IconPaperclip } from 'twenty-ui/icon';

export const AttachmentLabel = () => (
  <Badge>
    <IconPaperclip size={12} aria-hidden />
    Attachment
  </Badge>
);

import { Badge } from 'twenty-ui/primitives/data-display';
import { Text } from 'twenty-ui/primitives/typography';

export const BadgeAppearances = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <Badge size="sm" color="tertiary" shape="pill">
      Preview
    </Badge>
    <Badge size="md" color="inherit">
      In review
    </Badge>
    <Badge size="xs" color="primary" shape="circle">
      3
    </Badge>
    <Badge size="xs" color="secondary" shape="circle">
      12
    </Badge>
    <Badge color="accent">Last used</Badge>
  </Text>
);

import { Badge } from 'twenty-ui/primitives/data-display';
import { Button } from 'twenty-ui/primitives/input';

type InboxButtonProps = {
  count: number;
};

export const InboxButton = ({ count }: InboxButtonProps) => (
  <Button aria-label={`Inbox, ${count} unread messages`}>
    Inbox
    {count > 0 && (
      <Badge size="xs" color="primary" shape="pill" aria-hidden>
        {count > 99 ? '99+' : count}
      </Badge>
    )}
  </Button>
);

import { useRef } from 'react';
import { Badge } from 'twenty-ui/primitives/data-display';

export const BuildStatus = () => {
  const badgeRef = useRef<HTMLSpanElement>(null);

  return (
    <Badge ref={badgeRef} title="Current build status" data-build="preview">
      Preview
    </Badge>
  );
};

import { Badge } from 'twenty-ui/primitives/data-display';
import { Button } from 'twenty-ui/primitives/input';

export const ReleaseLink = () => (
  <Badge render={<Button href="#release-notes" size="sm" />}>
    Release notes
  </Badge>
);