Theme

MCP Server

Getting started

Contributing

Breaking Changes

FormattedRelativeTime

Combobox with Add New

Density

Inline Form Controls

Refinement levers

Search with DropdownMenu

Componentsv2.170.1

Iconsv1.15.0

MCPv0.8.18

Tokensv0.34.1

Link

The PlumaLink component renders a styled version of PlainLink. Just like PlainLink, it will use PlumaProvider's linkComponent, if it exists.

For more details on how to set up the link component on PlumaProvider, visit the provider's docs.

Usage

Link works just like PlainLink:

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

Customer.io

<Link
	href="https://customer.io"
>
	Customer.io
</Link>

The isExternal prop is automatically inferred from the URL (http://, https://, mailto:, tel:), but you can still explicitly set it if needed:

Customer.io

<Link
	href="https://customer.io"
	isExternal={true}
>
	Customer.io
</Link>

Primary

Underlined

To render the component in the "underlined" variant, use the isUnderlined prop:

Settings

<Text>
	<Link
		href="https://customer.io"
		isUnderlined={true}
		icon="manage"
	>Settings</Link>
</Text>

Secondary

To render the component in the "secondary" variant, use the variant prop.

Settings

<Text>
	<Link
		href="https://customer.io"
		variant="secondary"
		icon="manage"
	>Settings</Link>
</Text>

Underlined

To render the component without an underline, use the isUnderlined prop:

Settings

<Text>
	<Link
		href="https://customer.io"
		variant="secondary"
		isUnderlined={false}
		icon="manage"
	>Settings</Link>
</Text>

Icons

A Link can also be rendered with an icon, for example:

Settings

<Text>
	<Link
		href="https://customer.io"
		icon="manage"
	>Settings</Link>
</Text>

The icon can be placed on either side of the text via the iconPosition prop (by default, leading):

Go somewhere

<Text>
	<Link
		href="https://customer.io"
		icon="chevron-right"
		iconPosition="trailing"
	>Go somewhere</Link>
</Text>

If you need to use a custom icon that isn't part of the Pluma Icon set, you can use the iconSrc prop to provide a URL to an image. The image will be automatically sized to match the button's icon size:

Go somewhere

<Text>
	<Link
		href="https://customer.io"
		iconSrc="https://img.icons8.com/?size=256&id=19978&format=png"
		iconPosition="trailing"
	>Go somewhere</Link>
</Text>

Custom image icons support the same positioning options as standard icons:

Go somewhere

<Text>
	<Link
		href="https://customer.io"
		iconSrc="https://img.icons8.com/?size=256&id=19978&format=png"
		iconPosition="leading"
	>Go somewhere</Link>
</Text>

Go somewhere

<Text>
	<Link
		href="https://customer.io"
		iconSrc="https://img.icons8.com/?size=256&id=19978&format=png"
		iconPosition="trailing"
	>Go somewhere</Link>
</Text>

<Text>
	<Link
		href="https://customer.io"
		iconSrc="https://img.icons8.com/?size=256&id=19978&format=png"
	/>
</Text>

Buttons with link styles

You may sometimes need to render a button tag that's styled like the Link component. For example, you might want to render a clickable button inside a paragraph, which will perform an action on click (rather than navigating somewhere).

Do do so, pass in the onClick prop to the Link component:

<Text>
	<Link
		onClick={() => { console.log('Button clicked'); }}
	>
		I am actually a button
	</Link>
</Text>

API

`PlumaLink` `extends PlainLink`

`autoLoading` `boolean | undefined`

If true, the link will automatically show the spinner when the onClick function is called and it returns a promise. If false, the spinner will only show if the isLoading prop is set to true. By default, this is true.

`href` `string | undefined`

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

`icon` `IconName | null | undefined`

The name of an icon (from Pluma Icons) to render in the link

`iconAlignment` `"uppercase" | "lowercase" | undefined`

Override an icon's vertical alignment. By default the alignment is uppercase when the position is leading, and lowercase when the position is trailing

`iconPosition` `"leading" | "trailing" | undefined`

Default:leading

Which side of the text the icon should be rendered on. leading renders the icon before the text, trailing renders it after.

`iconSize` `"fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined`

Default:sm

What size to render the icon in (if an icon is provided)

`iconSrc` `string | undefined`

The source URL of a custom image icon to render in the link. When provided, this will be rendered using the Image component with icon sizing. Use v2 sizing (icon-v2-sm, icon-v2-md, icon-v2-lg, icon-v2-xl) for new implementations. The image will always have alt="" as it is purely decorative - meaning comes from link text or aria-label.

Link

Usage

Primary

Underlined

Secondary

Underlined

Icons

Custom icons

Buttons with link styles

API

`PlumaLink` `extends PlainLink`

`autoLoading` `boolean | undefined`

`href` `string | undefined`

`icon` `IconName | null | undefined`

`iconAlignment` `"uppercase" | "lowercase" | undefined`

`iconPosition` `"leading" | "trailing" | undefined`

`iconSize` `"fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined`

`iconSrc` `string | undefined`

`isDisabled` `boolean | undefined`

`isError` `boolean | undefined`

`isExternal` `boolean | undefined`

`isLoading` `boolean | undefined`

`isUnderlined` `boolean | undefined`

`onClick` `((evt: OnClickArgType) => any) | undefined`

`replace` `boolean | undefined`

`truncate` `boolean | "true" | undefined`

`unsafe_isLegacy` `boolean | undefined`

`variant` `"primary" | "secondary" | undefined`

`withSafeExternalAttributes` `boolean | undefined`

On this page

Link

PlumaLink extends PlainLink

autoLoading boolean | undefined

href string | undefined

icon IconName | null | undefined

iconAlignment "uppercase" | "lowercase" | undefined

iconPosition "leading" | "trailing" | undefined

iconSize "fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined

iconSrc string | undefined

isDisabled boolean | undefined

isError boolean | undefined

isExternal boolean | undefined

isLoading boolean | undefined

isUnderlined boolean | undefined

onClick ((evt: OnClickArgType) => any) | undefined

replace boolean | undefined

truncate boolean | "true" | undefined

unsafe_isLegacy boolean | undefined

variant "primary" | "secondary" | undefined

withSafeExternalAttributes boolean | undefined

On this page

`PlumaLink` `extends PlainLink`

`autoLoading` `boolean | undefined`

`href` `string | undefined`

`icon` `IconName | null | undefined`

`iconAlignment` `"uppercase" | "lowercase" | undefined`

`iconPosition` `"leading" | "trailing" | undefined`

`iconSize` `"fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined`

`iconSrc` `string | undefined`

`isDisabled` `boolean | undefined`

`isError` `boolean | undefined`

`isExternal` `boolean | undefined`

`isLoading` `boolean | undefined`

`isUnderlined` `boolean | undefined`

`onClick` `((evt: OnClickArgType) => any) | undefined`

`replace` `boolean | undefined`

`truncate` `boolean | "true" | undefined`

`unsafe_isLegacy` `boolean | undefined`

`variant` `"primary" | "secondary" | undefined`

`withSafeExternalAttributes` `boolean | undefined`