PlainLink is an unstyled wrapper component around the linkComponent defined on PlumaProvider. If no linkComponent is defined, a regular a tag is used instead.

Usage

You probably won't need to use this component much. This is used in Pluma internally to build the Link component, for example.

You can import the component via:

import { PlainLink } from '@customerio/pluma-components/react';

External link

<PlainLink
  href="http://example.com"
  isExternal={true}
>External link</PlainLink>

You may want to use the component for links with custom styling, for example:

This whole block is now a link!

<PlainLink
	href="http://customer.io"
	isExternal={true}
	display="inline-block"
	p="200"
	backgroundColor="accent-minimal"
>
	<Text>
		This whole block is now a link!
	</Text>
</PlainLink>

API

`PlumaPlainLink` `extends Box`

`href` `string | undefined`

The URL passed into the link component (or a tag)

`isDisabled` `boolean | undefined`

Whether the link should be disabled (this prevents click handlers from firing)

`isExternal` `boolean | undefined`

When this flag is true, an a tag will be used instead of the provider's linkComponent, even if it exists. Additionally, target="_blank" rel="noopener noreferrer" will be added automatically

`replace` `boolean | undefined`

This is passed into the provider's linkComponent. It can be used by the link component implementation to handle replaceState instead of pushState

`withSafeExternalAttributes` `boolean | undefined`

This allows turning off the automatic addition of target="_blank" rel="noopener noreferrer". This can be used for links to other protocols like mailto:

PlainLink

Usage

API

PlumaPlainLink extends Box

href string | undefined

isDisabled boolean | undefined

isExternal boolean | undefined

replace boolean | undefined