components

Link

Links are interactive text elements that navigate users to another page or external resource. They follow the design system's typography and color conventions. Use the linkType prop to control the visual style and the isExternal prop for links that open in a new tab.

Import
import { Link } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

  • +Navigate to other pages or external URLs.
  • +Inline text references that the user can follow.
  • +When the action is navigation, not a state change.

When not to use

  • −For actions (submit, delete, toggle) — use Button.
  • −For navigation menus — use SideNavigation.
  • −When you need button styling — use Button with transparent variant.

Examples

Code Samples

Default Link

A standard link with default styling.

import { Link } from "@skedulo/breeze-ui-react";

export default function DefaultLink() {
  return <Link href="https://www.skedulo.com">Skedulo Homepage</Link>;
}

Primary Link

A primary-styled link with the brand color for emphasis.

import { Link } from "@skedulo/breeze-ui-react";

export default function PrimaryLink() {
  return (
    <Link href="https://www.skedulo.com" linkType="primary">
      Primary styled link
    </Link>
  );
}

External Link

An external link that opens in a new tab with a visual indicator.

import { Link } from "@skedulo/breeze-ui-react";

export default function ExternalLink() {
  return (
    <Link href="https://www.skedulo.com" isExternal>
      External link (opens in new tab)
    </Link>
  );
}

Button Element Link

A link rendered as a button element, useful for actions that look like links but do not navigate.

import { Link } from "@skedulo/breeze-ui-react";

export default function ButtonLink() {
  return (
    <Link element="button" linkType="primary">
      Link styled as button element
    </Link>
  );
}

Links Inline with Text

Links used inline within paragraph text for natural reading flow.

import { Link } from "@skedulo/breeze-ui-react";

export default function InlineLinks() {
  return (
    <p className="text-sm">
      Visit the{" "}
      <Link href="https://www.skedulo.com" linkType="primary">
        Skedulo website
      </Link>{" "}
      for more information, or check out the{" "}
      <Link href="https://developer.skedulo.com" linkType="primary" isExternal>
        developer docs
      </Link>
      .
    </p>
  );
}

Guidelines

Do

  • ✓Use descriptive link text that explains the destination.
  • ✓Use target='_blank' with rel='noopener' for external links.
  • ✓Underline links to distinguish them from regular text.

Don't

  • ✗Don't use 'click here' as link text.
  • ✗Don't style buttons as links or links as buttons.
  • ✗Don't use links for actions that modify data.

API Reference

PropTypeDefaultDescription
hrefstring—The URL the link points to.
linkType"default" | "primary""default"The visual style of the link. Primary links use the brand color for emphasis.
isExternalbooleanfalseWhen true, the link opens in a new tab with an external link indicator. Automatically sets target="_blank" and rel="noopener noreferrer".
element"a" | "button""a"The underlying HTML element to render. Use button when the link triggers an action rather than navigation.
children*ReactNode—The link text or content to display.

Related Components

ButtonNavigation