blue
View on GitHub

Links

A link navigates users to another page or resource.

Usage

Starship
<script>
	import { Link } from 'deskblocks';
</script>

<Link href="https://www.spacex.com/vehicles/starship/">Starship</Link>

Inline link

Light
Blue
Zoho Puvi
For more information about starship, click here. 
<Text>
	For more information about starship,
	<Link href="https://www.spacex.com/vehicles/starship/">click here.</Link>
</Text>

Link with icon

Include the Icon component alongside the text, and ensure the icon is properly sized in proportion to the text.

Light
Blue
Zoho Puvi
Starship 
<script>
	import { Link, Icon } from 'deskblocks';
	import { IconOutLink } from 'deskblocks/icons';
</script>

<Link href="https://www.spacex.com/vehicles/starship/">
	Starship
	<Icon icon={IconOutLink} size={20} />
</Link>

Icon link

Light
Blue
Zoho Puvi 
<Link href="https://www.spacex.com/vehicles/starship/">
	<Icon icon={IconOutLink} />
</Link>

Disabled state

Light
Blue
Zoho Puvi
Starship
<Link disabled href="https://www.spacex.com/vehicles/starship/">Starship</Link>

Props

target ’_blank’ | ’_self’ ’_blank’ Specifies where to open the linked document.
href string undefined The URL or path to navigate to when the link is clicked.
inline boolean true Determines whether the link is displayed inline with surrounding content.
rel string undefined Defines the relationship between the current document and the linked resource.
disabled boolean false Disables the link, preventing any navigation when clicked.
tabindex number 0 Sets the tab order of the link for keyboard navigation.
class string undefined Custom CSS class name for additional styling.

Slots

Events