Link

Component

Storybook

Figma Demo

Guidelines

Variations

Links are offered in two basic sizes based on type:

• sm (14px)
• base (16px)

There are three main variations of links:

• Primary: Used anywhere a link is needed to navigate a user to another page or section. They must include either a leading or trailing icon, but not both. It should remove the underline for the active or pressed state as a visual indicator to the user that they are actioning the link.
• Secondary: Used for main navigation areas such as the global nav menu.
• Tertiary: More discoverable and used when a link doesn’t need to be as prominent, such as breadcrumbs.

Usage

• Hierarchy:
  • Use the base size primary link in the majority of cases.
  • Use the sm size where space is tight or if the surrounding content is also using smaller component variants.
  • Within main navigation areas, secondary links will generally use the base size on large breakpoints and the sm size on tablet/mobile breakpoints. Regular and semibold treatments within each size help to create the necessary hierarchy.
  • Use tertiary links for discoverable content where navigation is an option but not a necessary step for the average user. Examples include breadcrumbs or links to additional product details.

Accessibility

• Use built-in href over JavaScript to navigate.

Content

• A link’s label should set expectations about where it will take the user. Consider descriptive labels such as “View all invoices” instead of a more generic “View all.”
• If a link cannot be descriptive for some reason, additional context must exist so that users know where the link will take them.

Component Specs

API

• class: string | Default: undefined
  Extra classes provided to the component.

• disabled: boolean | Default: false
  Disables the link.

• dynamicSize: boolean | Default: false
  Dynamically changes the size of the link based on the screen width.

• href: string | Default: #
  The URL the link goes to.

• label: string | Default: undefined
  The text of the link.

• iconAfter: typeof SvelteComponent | Default: undefined
  The icon to use after the link.

• iconBefore: typeof SvelteComponent | Default: undefined
  The icon to use before the link.

• nowrap: boolean | Default: false
  Prevents the link from wrapping.

• semibold: boolean | Default: false
  Used for secondary links that need to be more prominent, such as the category in a navigation panel.

• size: 'sm' | 'default' | Default: 'default'
  The size of the link.

• testId: string | Default: undefined
  The test id of the component.

• variant: 'primary' | 'secondary' | 'tertiary' | Default: 'primary'
  The variant of the link.

Example

<script>
  import { Link } from '@getprovi/craft-svelte';
  import { PersonSolid, ChevronRight } from '@getprovi/craft-svelte-icons';
</script>

<Link href="#">Primary</Link>
<Link href="#" variant="secondary" size="sm">Sm Secondary</Link>
<Link href="#" variant="tertiary">Tertiary</Link>
<Link href="#" semibold>Semibold</Link>
<Link href="#" iconBefore={PersonSolid}>Icon Before</Link>
<Link href="#" iconAfter={ChevronRight}>Icon After</Link>

Types

interface Props extends HTMLAnchorAttributes {
	disabled?: boolean;
	dynamicSize?: boolean;
	iconAfter?: typeof SvelteComponent | undefined;
	iconBefore?: typeof SvelteComponent | undefined;
	label?: string;
	nowrap?: boolean;
	semibold?: boolean;
	size?: 'sm' | 'default';
	testId?: string | undefined;
	variant?: 'primary' | 'secondary' | 'tertiary';
}