---
title: "Link CTA"
description: "A text link styled as a call to action, with an optional directional arrow. Renders an `<a>` when given an `href` and a `<button>` otherwise."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/link-cta"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/link-cta.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Link CTA

A text link styled as a call to action, with an optional directional arrow. Renders an `<a>` when given an `href` and a `<button>` otherwise.

```tsx
import { LinkCTA } from "@sanity/sanity-id/components/link-cta"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `arrow` | `"arrow-up" \| "arrow-right" \| "arrow-down" \| "arrow-left" \| "arrow-top-right"` | no | `"arrow-right"` | Arrow icon to display |
| `arrowPosition` | `"left" \| "right"` | no | `"right"` | Side the arrow is displayed on |
| `as` | `E` | no | `props.href ? "a" : "button"` | Element or component to render as |
| `children` | `ReactNode` | no | — | Link text content |
| `href` | `string` | no | — | URL the link navigates to |
| `mode` | `"accent" \| "ghost"` | no | `"ghost"` | Visual style of the link |
| `size` | `"sm" \| "md" \| "lg"` | no | `"lg"` | Size of the link |

Also accepts every prop of `Omit<ComponentProps<E>, "as">`.

## Usage

```tsx
import { LinkCTA } from "@sanity/sanity-id/components/link-cta"
import * as React from "react"

export default () => {
	const arrows = ["arrow-up", "arrow-right", "arrow-down", "arrow-left", "arrow-top-right"]
	const arrowPositions = ["left", "right"]
	const sizes = ["lg", "md", "sm"]
	const modes = ["accent", "ghost"]
	return (
		<div className="gap-y-32 gap-x-64 grid grid-cols-[repeat(2,max-content)]">
			{modes.map((mode) => (
				<React.Fragment key={mode}>
					{sizes.map((size) => (
						<React.Fragment key={mode + size}>
							{arrows.map((arrow) => (
								<React.Fragment key={mode + size + arrow}>
									{arrowPositions.map((arrowPosition) => (
										<React.Fragment key={mode + size + arrow + arrowPosition}>
											<LinkCTA
												mode={mode}
												size={size}
												arrow={arrow}
												arrowPosition={arrowPosition}
												href="#link-cta"
											>
												Link CTA
											</LinkCTA>
										</React.Fragment>
									))}
								</React.Fragment>
							))}
						</React.Fragment>
					))}
				</React.Fragment>
			))}
		</div>
	)
}
```