component

Link

Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an anchor element.

Source code in GitHub Link in Storybook

Set Up #

Import a Link component in the script tag.

Example.svelte

<script>
	import { Link } from '@sans-ui/core';
</script>

Usage #

The Link component allows users to navigate between pages. Below is an example of a link pointing to a GitHub page:

This is link to the our Github page

Example.svelte

<script>
	import { Link } from '@sans-ui/core';
</script>

<Link href="https://github.com/s-ui-org/s-ui" target="_blank">
	This is link to the our Github page
</Link>

Variant #

You can control the color theme of the Link component using the variant prop:

This is link to the our Github page This is link to the our Github page This is link to the our Github page This is link to the our Github page This is link to the our Github page

Example.svelte

<script>
	import { Link } from '@sans-ui/core';
</script>

<Link variant="primary" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>This is link to the our Github page</Link
>
<Link variant="secondary" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>This is link to the our Github page</Link
>
<Link variant="success" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>This is link to the our Github page</Link
>
<Link variant="warning" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>This is link to the our Github page</Link
>
<Link variant="danger" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>This is link to the our Github page</Link
>

Font Size #

Use the size prop to adjust the font size of the Link component. Available sizes range from sm to 7xl:

This is sm This is md This is lg This is xl This is 2xl This is 3xl This is 4xl This is 5xl This is 6xl This is 7xl

Example.svelte

<script>
	import { Link } from '@sans-ui/core';
</script>

<Link size="sm" href="https://github.com/s-ui-org/s-ui" target="_blank">This is sm</Link>
<Link size="md" href="https://github.com/s-ui-org/s-ui" target="_blank">This is md</Link>
<Link size="lg" href="https://github.com/s-ui-org/s-ui" target="_blank">This is lg</Link>
<Link size="xl" href="https://github.com/s-ui-org/s-ui" target="_blank">This is xl</Link>
<Link size="2xl" href="https://github.com/s-ui-org/s-ui" target="_blank">This is 2xl</Link>
<Link size="3xl" href="https://github.com/s-ui-org/s-ui" target="_blank">This is 3xl</Link>
<Link size="4xl" href="https://github.com/s-ui-org/s-ui" target="_blank">This is 4xl</Link>
<Link size="5xl" href="https://github.com/s-ui-org/s-ui" target="_blank">This is 5xl</Link>
<Link size="6xl" href="https://github.com/s-ui-org/s-ui" target="_blank">This is 6xl</Link>
<Link size="7xl" href="https://github.com/s-ui-org/s-ui" target="_blank">This is 7xl</Link>

Font Weight #

Control the font weight using the fontWeight prop, with options ranging from thin to black:

This is thin This is extralight This is light This is normal This is medium This is semibold This is bold This is extrabold This is black

Example.svelte

<script>
	import { Link } from '@sans-ui/core';
</script>

<Link fontWeight="thin" href="https://github.com/s-ui-org/s-ui" target="_blank">This is thin</Link>
<Link fontWeight="extralight" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>This is extralight</Link
>
<Link fontWeight="light" href="https://github.com/s-ui-org/s-ui" target="_blank">This is light</Link
>
<Link fontWeight="normal" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>This is normal</Link
>
<Link fontWeight="medium" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>This is medium</Link
>
<Link fontWeight="semibold" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>This is semibold</Link
>
<Link fontWeight="bold" href="https://github.com/s-ui-org/s-ui" target="_blank">This is bold</Link>
<Link fontWeight="extrabold" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>This is extrabold</Link
>
<Link fontWeight="black" href="https://github.com/s-ui-org/s-ui" target="_blank">This is black</Link
>

Underline Type #

The underlineType prop defines when the link should be underlined. Options include:

underlineType is "none" underlineType is "hover" underlineType is "always" underlineType is "active"

Example.svelte

<script>
	import { Link } from '@sans-ui/core';
</script>

<Link underlineType="none" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>underlineType is "none"</Link
>
<Link underlineType="hover" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>underlineType is "hover"</Link
>
<Link underlineType="always" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>underlineType is "always"</Link
>
<Link underlineType="active" href="https://github.com/s-ui-org/s-ui" target="_blank"
	>underlineType is "active"</Link
>

Disabled #

The disabled prop disables the link, making it non-clickable:

This is link to the our Github page

Example.svelte

<script>
	import { Link } from '@sans-ui/core';
</script>

<Link disabled={true} href="https://github.com/s-ui-org/s-ui" target="_blank">
	This is link to the our Github page
</Link>

External #

Use the external prop to indicate an external link, which typically opens in a new tab:

This is an External link to the our Github page

Example.svelte

<script>
	import { Link } from '@sans-ui/core';
</script>

<Link external={true} href="https://github.com/s-ui-org/s-ui"
	>This is an External link to the our Github page</Link
>

Window Icon #

Enable the windowIcon prop to display an icon indicating that the link will open in a new window or tab:

This is link to the our Github page

Example.svelte

<script>
	import { Link } from '@sans-ui/core';
</script>

<Link windowIcon external href="https://github.com/s-ui-org/s-ui"
	>This is link to the our Github page</Link
>

Animation #

Control link animations using the animation prop. By default, animations are enabled. Set animation to false to disable them:

This is link to the our Github page

Example.svelte

<script>
	import { Link } from '@sans-ui/core';
</script>

<Link disabled href="https://github.com/s-ui-org/s-ui" animation={false}
	>This is link to the our Github page</Link
>

Accessibility #

Built with a native input element.
Visual and ARIA labeling support.
Change, clipboard, composition, selection, and input event support.
Required and invalid states exposed to assistive technology via ARIA.
Support for description and error message help text linked to the input via ARIA.

API #

Link provides APIs(Properties) that is necessary for you to configure a Link compponent.

Link Props #

Name	Type	Default Value
`variant`	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'	'primary'
`size`	'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| '5xl' \| '6xl' \| '7xl'	'md'
`fontWeight`	'thin' \| 'extralight' \| 'light' \| 'normal' \| 'medium' \| 'semibold' \| 'bold' \| 'extrabold' \| 'black'	'medium'
`underlineType`	'none' \| 'hover' \| 'always' \| 'active'	'always'
`disabled`	boolean	false
`windowIcon`	boolean	false
`external`	boolean	false
`animation`	boolean	true
`href`	string	""

Link Slots #

Name	Description
`base`	this slot is applied to the anchor element.
`icon`	this slot is applied to the window icon svg element.