InlineLink

Component

InlineLink is what you use inside other text.

Storybook

Figma Demo

Guidelines

Variations

Inline links may be either:

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

Per our typography guidelines, only paragraph copy may have inline links.

Best Practices

• Use inline links when a piece of content within other content will navigate a user to another location.
• Don’t use inline links by themselves. Our basic Link component is designed for standalone links as they require an icon and are more noticeable to users.

Component Specs

API

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

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

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

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

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

Example

<script>
	import { InlineLink } from '@getprovi/craft-svelte';
</script>

<InlineLink href="https://craft.provi.design" size="sm"> Craft Design System </InlineLink> is where
you find all the design system documentation.

Types

interface Props extends HTMLAnchorAttributes {
	label?: string | undefined;
	size?: 'sm' | 'default';
	testId?: string;
}