LabeledSeparator

import { LabeledSeparator } from 'twenty-ui/components/layout';
import { Button } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

export const ImportOptions = () => (
  <Text
    style={{
      display: 'grid',
      gap: 'var(--t-spacing-3)',
      width: 320,
      maxWidth: '100%',
    }}
  >
    <Button fullWidth>Import a CSV file</Button>
    <LabeledSeparator>Or</LabeledSeparator>
    <Button fullWidth variant="outline">
      Connect a data source
    </Button>
  </Text>
);

import { LabeledSeparator } from 'twenty-ui/components/layout';

export const UnreadMarker = () => (
  <LabeledSeparator
    labelPosition="end"
    tone="danger"
    hasStartMarker
    style={{ width: 488, maxWidth: '100%' }}
  >
    New
  </LabeledSeparator>
);