> ## 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.

# RoundedLink

> A rounded external link with a required visible label.

`RoundedLink` normalizes its destination and opens it in a new tab. Supply a non-empty `label`; otherwise the component renders nothing.

```tsx theme={null}
import { RoundedLink } from 'twenty-ui/components';

export const DocumentationLink = () => (
  <RoundedLink href="https://docs.twenty.com" label="Documentation" />
);
```

Clicks stop propagation before calling `onClick`. Use that callback for application behavior without interfering with navigation. Only the listed props are forwarded; for router integration or configurable link attributes, use [Button](/ui/primitives/input/button#links-and-forms).

## Props

<ParamField body="className" type="string">
  Class applied to the link.
</ParamField>

<ParamField body="color" type="&#x22;primary&#x22; | &#x22;secondary&#x22;" default="primary">
  Label text color: primary or secondary.
</ParamField>

<ParamField body="href" type="string" required>
  Destination URL, normalized by the safe-URL helper. Opens in a new tab.
</ParamField>

<ParamField body="label" type="string">
  Visible link text. An absent or empty label renders nothing.
</ParamField>

<ParamField body="onClick" type="((event: MouseEvent<HTMLElement, MouseEvent>) => void)">
  Click callback after propagation is stopped.
</ParamField>