Link

import {Provider} from '@clayui/core';
import Link from '@clayui/link';
import React from 'react';

export default function App() {
  const colStyles = {
    backgroundColor: '#E7E7ED',
    border: '1px solid #CDCED9',
    paddingBottom: '.75rem',
    paddingTop: '.75rem',
  };

  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <Link displayType="primary" href="#link-styles">
          Primary
        </Link>
      </div>
    </Provider>
  );
}

const ConfirmBeforeNavigate = ({children, href, ...otherProps}) => (
  <a
    {...otherProps}
    href={href}
    onClick={(e) =>
      window.confirm('r u sure?') ? undefined : e.preventDefault()
    }
  >
    {children}
  </a>
);

<ClayLinkContext.Provider value={ConfirmBeforeNavigate}>
  <div>
    <ClayLink href="#">Click me</ClayLink>
  </div>
</ClayLinkContext.Provider>;