Banner

import { Banner } from 'twenty-ui/primitives/feedback';

export const SyncBanner = () => (
  <Banner status="info" variant="solid">
    Contact sync is temporarily paused. Your saved records remain available.
  </Banner>
);

import { Banner } from 'twenty-ui/primitives/feedback';
import { IconInfoCircle } from 'twenty-ui/icon';

export const SyncBanner = ({ onRetry }: { onRetry: () => void }) => (
  <Banner
    status="error"
    variant="soft"
    color="blue"
    icon={<IconInfoCircle aria-hidden="true" />}
    action={<Banner.Action onClick={onRetry}>Retry sync</Banner.Action>}
  >
    Contact sync could not finish.
  </Banner>
);

import { Banner } from 'twenty-ui/primitives/feedback';

export const SyncResult = () => (
  <Banner
    status="success"
    variant="soft"
    role="status"
    aria-live="polite"
    aria-atomic="true"
    render={<section aria-label="Sync result" />}
  >
    Contacts are up to date.
  </Banner>
);

import { useState } from 'react';
import { Banner } from 'twenty-ui/primitives/feedback';

export const DismissibleSyncBanner = () => {
  const [isVisible, setIsVisible] = useState(true);

  return isVisible ? (
    <Banner
      onDismiss={() => setIsVisible(false)}
      closeLabel="Dismiss sync message"
    >
      Contacts are syncing in the background.
    </Banner>
  ) : null;
};