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. 

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

Props

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

LinkCTA props
PropTypeDescription
arrow"arrow-up" | "arrow-right" | "arrow-down" | "arrow-left" | "arrow-top-right"

Arrow icon to display

default value: "arrow-right"

arrowPosition"left" | "right"

Side the arrow is displayed on

default value: "right"

asE

Element or component to render as

default value: props.href ? "a" : "button"

childrenReactNode

Link text content

hrefstring

URL the link navigates to

mode"accent" | "ghost"

Visual style of the link

default value: "ghost"

size"sm" | "md" | "lg"

Size of the link

default value: "lg"

Usage

Link CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTALink CTA
1import { LinkCTA } from "@sanity/sanity-id/components/link-cta"
2import * as React from "react"
3
4export default () => {
5        const arrows = ["arrow-up", "arrow-right", "arrow-down", "arrow-left", "arrow-top-right"]
6        const arrowPositions = ["left", "right"]
7        const sizes = ["lg", "md", "sm"]
8        const modes = ["accent", "ghost"]
9        return (
10          <div className="gap-y-32 gap-x-64 grid grid-cols-[repeat(2,max-content)]">
11            {modes.map((mode) => (
12              <React.Fragment key={mode}>
13                {sizes.map((size) => (
14                  <React.Fragment key={mode + size}>
15                    {arrows.map((arrow) => (
16                      <React.Fragment key={mode + size + arrow}>
17                        {arrowPositions.map((arrowPosition) => (
18                          <React.Fragment key={mode + size + arrow + arrowPosition}>
19                            <LinkCTA
20                              mode={mode}
21                              size={size}
22                              arrow={arrow}
23                              arrowPosition={arrowPosition}
24                              href="#link-cta"
25                            >
26                              Link CTA
27                            </LinkCTA>
28                          </React.Fragment>
29                        ))}
30                      </React.Fragment>
31                    ))}
32                  </React.Fragment>
33                ))}
34              </React.Fragment>
35            ))}
36          </div>
37        )
38      }