Link

BETA

Component demo

Interactive example

Web component

React

<ic-linkhref="/components/link/code">About our coffees</ic-link>

<IcLinkhref="/components/link/code">About our coffees</IcLink>

Link details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property download Attribute download	If`true` , the user can save the linked URL instead of navigating to it. type: string \| boolean - boolean \| string	false
Property href Attribute href	The URL that the link points to. type: string	null
Property hreflang Attribute hreflang	The human language of the linked URL. type: string
Property monochrome Attribute monochrome	If`true` , the link will display as black in the light theme, and white in the dark theme. type: boolean	false
Property referrerpolicy Attribute referrerpolicy	How much of the referrer to send when following the link. type: ReferrerPolicy - "" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"
Property rel Attribute rel	The relationship of the linked URL as space-separated link types. type: string
Property target Attribute target	The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe). type: string
Property theme Attribute theme	Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component. type: IcThemeMode - "dark" \| "inherit" \| "light"	"inherit"

Property

download

Attribute

download

Iftrue , the user can save the linked URL instead of navigating to it.

type: string | boolean - boolean | string

Default: false

Property

href

Attribute

href

The URL that the link points to.

type: string

Default: null

Property

hreflang

Attribute

hreflang

The human language of the linked URL.

type: string

Property

monochrome

Attribute

monochrome

Iftrue , the link will display as black in the light theme, and white in the dark theme.

type: boolean

Default: false

Property

referrerpolicy

Attribute

referrerpolicy

How much of the referrer to send when following the link.

Property

rel

Attribute

rel

The relationship of the linked URL as space-separated link types.

type: string

Property

target

Attribute

target

The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).

type: string

Property

theme

Attribute

theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light"

Default: "inherit"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot router-item	Handle routing by nesting your routes in this slot.

Methods

Name	Description	Signature
Method setFocus	Sets focus on the link.	setFocus() => Promise<void>

Method

setFocus

Sets focus on the link.

setFocus() => Promise<void>

Variants

With icon

Interactive example

About our coffees

Web component

React

<ic-linkhref="#"target="_blank">About our coffees</ic-link>

<IcLinkhref="#"target="_blank">About our coffees</IcLink>

Theme

Interactive example

About our coffees

Web component

React

<ic-linkhref="#"theme="light"target="_blank">About our coffees</ic-link>
<ic-linkhref="#"theme="dark"target="_blank">About our coffees</ic-link>

<IcLinkhref="#"theme="light"target="_blank">About our coffees</IcLink>
<IcLinkhref="#"theme="dark"target="_blank">About our coffees</IcLink>

Monochrome

Interactive example

About our coffees

Web component

React

<ic-linkhref="#"theme="light"monochrome="true"target="_blank">About our coffees</ic-link>
<ic-linkhref="#"theme="dark"monochrome="true"target="_blank">About our coffees</ic-link>

<IcLinkhref="#"theme="light"monochrometarget="_blank">About our coffees</IcLink>
<IcLinkhref="#"theme="dark"monochrometarget="_blank">About our coffees</IcLink>

With React Router

Interactive example

Home

Beverages

React

<MemoryRouterinitialEntries={["/"]}>
<divclassName={classes.linkContainer}>
<IcLink>
<NavLinkto="/"slot="router-item">Home</NavLink>
</IcLink>
<IcLink>
<NavLinkto="/daily-tippers"slot="router-item">Beverages</NavLink>
</IcLink>
</div>
<IcSectionContainer>
<Routes>
<Routepath="/"element={<IcTypography>This is the home page</IcTypography>}/>
<Routepath="/daily-tippers"element={<IcTypography>This page is about beverages</IcTypography>}/>
</Routes>
</IcSectionContainer>
</MemoryRouter>

Last reviewed 3 September 2024 .