Link

import {Link} from '@gravity-ui/uikit';

Link is a part of text that, when clicked, takes the user to another part of the page, another page within the service, or an external website page.

Its main difference from Button is the navigation function. Most often, a Link leads to another page or opens a new browser tab.

§Appearance

There are three types of links available: normal (the usual brown), primary (black), and secondary (gray). You can manage it with the view property. You can also enable displaying that the link has already been clicked using the visitable property.

§Normal

This is the most familiar and well-established link pattern. It is used to visually highlight an element inside a text or table, and as part of navigation. You can use it to navigate to both internal pages and external sources, including documentation. Additionally, this type is used for error pages and zero states.

import {Link} from '@gravity-ui/uikit';


export default function () {
    return <Link view="normal" href="#">Link</Link>;
}

§Primary

This type is used when it is natively clear that an element is clickable, but using a brown Link will overload the interface and prevent you from properly highlighting key points on a page.

import {Link} from '@gravity-ui/uikit';


export default function () {
    return <Link view="primary" href="#">Link</Link>;
}

§Secondary

Just like primary Link, this type is used when it is natively clear to the user that an element is clickable, while navigating through it is not essential and affects a small number of scenarios. Its main goal is not to distract the user from the key points on the page. The Secondary type is most often used in breadcrumbs or when displaying secondary attributes.

import {Link} from '@gravity-ui/uikit';


export default function () {
    return <Link view="secondary" href="#">Link</Link>;
}

§Visitable

This property is used to show that the Link has already been clicked.

import {Link} from '@gravity-ui/uikit';


export default function () {
    return <Link href="https://gravity-ui.com/" visitable>Link</Link>;
}

§href

The href property is required.

import {Link} from '@gravity-ui/uikit';


export default function () {
    return <Link href="#">Link with href</Link>;
}

§Usage

You can use a Link both as an independent text element and as part of the text:

import {Link, Text} from '@gravity-ui/uikit';


export default function () {
    return (
        <>
            <Text>
                <Link href="#">what roles are active in the service</Link>
            </Text>
            <Text>
                Currently, this role can only be assigned to a{' '}
                <Link href="#">folder</Link> or <Link href="#">cloud</Link>
            </Text>
        </>
    );
}

§Properties

Link accepts any valid a element props in addition to these: