Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Link

Guidance Code Accessibility

Component demo

Interactive example

About our coffees
Web component React
StackBlitz
Show full code 
<ic-linkhref="/components/link/code">About our coffees</ic-link>

Props

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

Name Description Default
Property download
Attribute download

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

type: string | boolean - boolean | string | undefined
false
Property href
Attribute href

The URL that the link points to.

type: string - string | undefined
Property hreflang
Attribute hreflang

The human language of the linked URL.

type: string - string | undefined
Property monochrome
Attribute monochrome

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

type: boolean - boolean | undefined
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" | undefined
Property rel
Attribute rel

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

type: string - string | undefined
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 - string | undefined
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" | undefined
"inherit"
Property download
Attribute download

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

type: string | boolean - boolean | string | undefined
Default: false
Property href
Attribute href

The URL that the link points to.

type: string - string | undefined
Property hreflang
Attribute hreflang

The human language of the linked URL.

type: string - string | undefined
Property monochrome
Attribute monochrome

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

type: boolean - boolean | undefined
Default: 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" | undefined
Property rel
Attribute rel

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

type: string - string | undefined
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 - string | undefined
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" | undefined
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.

Read more about slots .


Name Description
Slot router-item
Handle routing by nesting your routes in this slot.
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
StackBlitz
Show full code 
<ic-linkhref="#"target="_blank">About our coffees</ic-link>

Theme

Interactive example

About our coffees
About our coffees
Web component React
StackBlitz
Show full code 
<ic-linkhref="#"theme="light"target="_blank">About our coffees</ic-link>
<ic-linkhref="#"theme="dark"target="_blank">About our coffees</ic-link>

Monochrome

Interactive example

About our coffees
About our coffees
Web component React
StackBlitz
Show full code 
<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>

With React Router

Interactive example

React
StackBlitz
Show full code 
<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 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Link - Intelligence Community Design System