Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";


# Link Types
The Link data type configures which types of links your component can support.

## Link

Configure which types of links your component can support. The editor displays an appropriate link picker based on the allowed types.

> **Note:** Specify these additional configurations under a `link` field in your [data item](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview#data-item-fields).

<PropertyList bordered>
  <Property
    name="linkTypes"
    type="LinkType[]"
    description="List of link types Wix users can choose from. If omitted, all link types are available."
  >
    <ExpandableSection name="LinkType values">
      <PropertyList>
        <Property name="externalLink" description="A link to another website." />
        <Property name="anchorLink" description="A link to an item on the current page." />
        <Property name="emailLink" description="A valid email link mailto:example@example.com." />
        <Property name="phoneLink" description="A valid phone link phone:11111111111." />
        <Property name="dynamicPageLink" description="A link to a page in Wix that needs to be selected dynamically." />
        <Property name="pageLink" description="A link to another page on the site." />
        <Property name="whatsAppLink" description="A link to open a WhatsApp conversation." />
        <Property name="documentLink" description="A link to a PDF file hosted by Wix." />
        <Property name="popupLink" description="A link that opens a lightbox." />
        <Property name="addressLink" description="A link that directs the user to an address on Google Maps." />
        <Property name="edgeAnchorLinks" description="A link that scrolls to the top/bottom of the page." />
        <Property name="loginToWixLink" description="A link that directs the user to Wix login dialog." />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

### Example

A call-to-action button with limited link types:

In the manifest:

```typescript
editorElement: {
  data: {
    ctaButton: {
      dataType: "link",
      displayName: "Call to Action",
      defaultValue: {
        href: "https://example.com",
        target: "_blank",
      },
      link: {
        linkTypes: [
          "externalLink",
          "pageLink",
          "emailLink",
        ],
      },
    },
  },
}
```

In the component:

```tsx
import type { Link } from '@wix/editor-react-types';

interface ButtonProps {
  ctaButton?: Link;
}

const Button = ({ ctaButton }: ButtonProps) => (
  <a href={ctaButton?.href} target={ctaButton?.target}>Click me</a>
);
```

## See also

- [Data Overview](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview)
- [Accessibility Types](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/accessibility-types)
- [Complex Data Types](fallback::https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/complex-data-types)