> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ClickToActionLink

> Render a text link for navigation to a destination.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`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](/ui/primitives/input/button).

<StoryEmbed storyId="ui-navigation-clicktoactionlink--default" title="ClickToActionLink example" />

## Usage

```tsx theme={null}
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

```tsx theme={null}
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

<ParamField body="children" type="ReactNode">
  Visible link text or content. Use a descriptive destination label.
</ParamField>

<ParamField body="className" type="string">
  CSS class applied to the anchor.
</ParamField>

<ParamField body="href" type="string">
  Destination URL for native link navigation.
</ParamField>

<ParamField body="onClick" type="MouseEventHandler<HTMLAnchorElement>">
  Click handler called when the link is activated.
</ParamField>

<ParamField body="rel" type="string">
  Relationship to the destination, such as `noopener noreferrer` for a new tab.
</ParamField>

<ParamField body="target" type="HTMLAttributeAnchorTarget">
  Browsing context in which to open the destination.
</ParamField>