Link

Links allow a user to navigate between pages, scroll to a have page section, access files, or even to handle email addresses.

usage

import { TextLink, IconLink, Link, TextLinkAsButton, IconLinkAsButton } from "@sharegate/orbit-ui";

wai-aria

https://www.w3.org/WAI/ARIA/apg/patterns/link

sources

Github

TextLink

A link style can optimized for text.

<TextLink href="#">Flight details</TextLink>

Icon

A text link can contain icons.

<Inline alignY="center">
    <TextLink size="sm" href="#">
        <Text>Flight details</Text>
        <PlaceholderMajorIcon />
    </TextLink>
    <TextLink href="#">
        <Text>Flight details</Text>
        <PlaceholderMajorIcon />
    </TextLink>
</Inline>

Start icon

Non standard start icons can be provided to handle special cases. However, think twice before adding start icons, end icons should be your go to.

<TextLink href="#">
    <PlaceholderMajorIcon slot="start-icon" />
    <Text>Flight details</Text>
</TextLink>

External

An external text link will render by default with rel="noopener noreferrer" attribute.

You should avoid opening an external link in a new window or tab since it can be disorienting for people. Only do it when it's necessary. For more information, see W3C recommendation.

<TextLink external href="#">
    Flight details
</TextLink>

Variants

A link can use a different style.

<Inline>
    <TextLink variant="accent" href="#">
        Accent
    </TextLink>
    <TextLink variant="negative" href="#">
        Negative
    </TextLink>
</Inline>

Disabled

A link can have disabled style, it's your responsability to make sure the link doesn't navigate anywhere when activated.

<TextLink disabled href="#">
    Flight details
</TextLink>

Size

A link can vary in size.

<Inline alignY="center">
    <TextLink size="sm" href="#">
        Flight details
    </TextLink>
    <TextLink href="#">Flight details</TextLink>
</Inline>

Button

A link can behave like a button by using the TextLinkAsButton component.

<TextLinkAsButton>Flight details</TextLinkAsButton>

React router

To integrate with a third-party routing library like React Router any link component can be rendered as a React Router Link or as any other custom component.

const RouterTextLink = as(TextLink, RouterLink);

render(() => {
    return <RouterTextLink to="/flight-details">Flight details</RouterTextLink>
});

Icon link

A link content can be a single icon.

<Inline alignY="center">
    <IconLink aria-label="Add" href="#">
        <PlaceholderMajorIcon />
    </IconLink>
</Inline>

Button

An icon link can behave like a button by using the IconLinkAsButton component.

<IconLinkAsButton>
    <PlaceholderMajorIcon />
</IconLinkAsButton>

Basic link

A link can have a more subtle appareance and only be noticeable when focused.

Image

A link content can be an image element.

Editable example

<Link href="#"> <Image src={GalaxyLargeImage} alt="SpaceX launch" /> </Link>

<Link href="#">
    <Image src={GalaxyLargeImage} alt="SpaceX launch" />
</Link>

Shape

A link can use a different shape to match his content shape on focus state.

Editable example

<Inline> <Link shape="rounded" focus href="#"> <Image src={GalaxyLargeImage} alt="SpaceX launch" width="100px" height="100px" /> </Link> <Link shape="circular" focus href="#"> <Image src={GalaxyLargeImage} alt="SpaceX launch" width="100px" height="100px" /> </Link> <Link shape="box" focus href="#"> <Image src={GalaxyLargeImage} alt="SpaceX launch" width="100px" height="100px" /> </Link> </Inline>

<Inline>
    <Link shape="rounded" focus href="#">
        <Image src={GalaxyLargeImage} alt="SpaceX launch" width="100px" height="100px" />
    </Link>
    <Link shape="circular" focus href="#">
        <Image src={GalaxyLargeImage} alt="SpaceX launch" width="100px" height="100px" />
    </Link>
    <Link shape="box" focus href="#">
        <Image src={GalaxyLargeImage} alt="SpaceX launch" width="100px" height="100px" />
    </Link>
</Inline>

API

TextLink

usage

import { TextLink } from "@sharegate/orbit-ui";

slots

"left-icon", "text", "icon"

extends

• A
• StyleProps

IconLink

usage

import { IconLink } from "@sharegate/orbit-ui";

extends

• A
• StyleProps

Link

usage

import { Link } from "@sharegate/orbit-ui";

extends

• A
• StyleProps

TextLinkAsButton

usage

import { TextLinkAsButton } from "@sharegate/orbit-ui";

extends

• A
• StyleProps

IconLinkAsButton

usage

import { IconLinkAsButton } from "@sharegate/orbit-ui";

extends

• A
• StyleProps