Link

<BodyText>Be the extraordinary home service company with <Link color="primary" href="//servicetitan.com">ServiceTitan</Link>.</BodyText>

Colors

There are 4 color options for Links. Dark Grey is the default and depending on the link action, can be changed to blue for primary actions, red for negative actions or lighter grey for subdued actions.

<Stack spacing={2} direction="column">
    <Link href="//servicetitan.com" color="primary">Primary Link</Link>
    <Link href="//servicetitan.com">Default Link</Link>
    <Link onClick={() => alert("link clicked")} color="negative">Negative Link</Link>
    <Link onClick={() => alert("link clicked")} color="subdued">Subdued Link</Link>
</Stack>

States

<Stack spacing={2} direction="column">
    <Link color="primary">Active Link</Link>
    <Link color="primary" disabled>Disabled Link</Link>
</Stack>

Content Guidelines

Standalone links

Standalone links are written similarly to calls to action: They are not full sentences, have no punctuation except question marks, and use short action-oriented phrases.

Users typically see links as optional or supplemental content because they often appear at the end of a sentence or paragraph. Links should never use “click here” or “here” as link text.

Links in sentences

The link should only include text that refers directly to the destination. Include enough context about the destination in the link text to allow the user to understand the value and know what to expect when they click.

Links in sentences are part of a paragraph. Include enough context in the link text to communicate the value and expectation of the landing experience.

Related Components

• For a Link that needs padding or to line up with a button, use the Subtle variant of a Button.

Importing

import { Link } from '@servicetitan/design-system';