ClickToActionLink

ClickToActionLink renders a styled native anchor. Use a meaningful href and descriptive visible text. For an action that changes application state without navigation, use Button.

Usage

import { ClickToActionLink } from 'twenty-ui/primitives/navigation';

export const ImportHelpLink = () => (
  <ClickToActionLink href="https://docs.twenty.com/">
    Read the Twenty documentation
  </ClickToActionLink>
);

Open a new tab

import { ClickToActionLink } from 'twenty-ui/primitives/navigation';

export const ExternalHelpLink = () => (
  <ClickToActionLink
    href="https://docs.twenty.com/"
    target="_blank"
    rel="noopener noreferrer"
  >
    Read the documentation (opens in a new tab)
  </ClickToActionLink>
);

With an href, the native anchor provides keyboard focus and Enter activation. onClick can observe or intercept activation; routing and state belong to the host application. Although its TypeScript type accepts anchor attributes, the current implementation forwards only children, className, href, onClick, target, and rel. Other attributes and refs are not forwarded. Use visible link text as the accessible name.

Props

ReactNode

Visible link text or content. Use a descriptive destination label.

string

CSS class applied to the anchor.

string

Destination URL for native link navigation.

MouseEventHandler<HTMLAnchorElement>

Click handler called when the link is activated.

string

Relationship to the destination, such as noopener noreferrer for a new tab.

HTMLAttributeAnchorTarget

Browsing context in which to open the destination.

Overview

Apps

API

Self-Host

Contribute

UI Library

Usage

Open a new tab

Props

​Usage

​Open a new tab

​Props

Usage

Open a new tab

Props