Link in text

By default, links are displayed as inline element and don’t need some extra settings.

import LinkExternalM from '@semcore/icon/LinkExternal/m';
import Link from '@semcore/ui/link';
import { Text, List } from '@semcore/ui/typography';
import React from 'react';

const Demo = () => {
  return (
    <>
      <Text size={300} mt={3} tag='p'>
        The Intergalactic Design System
        {' '}
        <Link href='https://developer.semrush.com/intergalactic/components/link/link-api' enableVisited>
          <Link.Text>
            is so cutting-edge that even black holes are jealous of
            its sleek interface, look at them
          </Link.Text>
          <Link.Addon mt='-3px'>
            <LinkExternalM />
          </Link.Addon>
        </Link>
        .
      </Text>
      <Text size={300} mt={3} tag='p'>
        Aliens from distant galaxies use it to
        {' '}
        <Link href='#'>
          create otherworldly websites
        </Link>
        {' '}
        that are so user-friendly, even a space-faring cat with paws can navigate them.
      </Text>
      <Text size={300} mt={3} tag='p'>Look at these:</Text>
      <List size={300} w={300}>
        <List.Item>
          <Link href='#'>
            Alien fashionistas on Mars are rocking sleek spacesuits with astonishing components.
          </Link>
        </List.Item>
        <List.Item>
          <Link href='#' noWrap={true}>
            This link has noWrap="true". Rumor has it that our design system's official font is so futuristic that it writes its
            own code while you're reading it.
          </Link>
        </List.Item>
      </List>
    </>
  );
};

export default Demo;

Link addon

You can add addons to link either by specifying the desired tag in the addonLeft/addonRight property or by rendering the Link.Addon/Link.Text in the component body. Both methods achieve the same result.

import CheckM from '@semcore/icon/Check/m';
import ChevronRightM from '@semcore/icon/ChevronRight/m';
import Link from '@semcore/ui/link';
import React from 'react';

const Demo = () => {
  return (
    <>
      <Link ml={4} href='#'>
        <Link.Addon>
          <CheckM />
        </Link.Addon>
        <Link.Text size={300}>Link</Link.Text>
        <Link.Addon>
          <ChevronRightM />
        </Link.Addon>
      </Link>
    </>
  );
};

export default Demo;

Color links

Links can be colored for specific purposes. You can apply a specific color to links by passing the color property to them.

import Link from '@semcore/ui/link';
import React from 'react';

const Demo = () => {
  return (
    <div>
      <Link color='text-critical' href='#' size={300}>
        Critical link
      </Link>
      <br />
      <br />
      <Link color='text-success' href='#' size={300}>
        Success link
      </Link>
    </div>
  );
};

export default Demo;

Link as button

In case you need to render a Link that looks like a Button, use the Button component with tag={'a'}.

TIP

If you need to display disabled link as a Button you should remove href prop by yourself.

import PlusM from '@semcore/icon/MathPlus/m';
import Button from '@semcore/ui/button';
import React from 'react';

const Demo = () => {
  return (
    <>
      <Button tag='a' href='#'>
        <Button.Addon>
          <PlusM />
        </Button.Addon>
        <Button.Text>Link as button</Button.Text>
      </Button>
      {' '}
      <Button tag='a' disabled>
        <Button.Addon>
          <PlusM />
        </Button.Addon>
        <Button.Text>Disabled link as button</Button.Text>
      </Button>
    </>
  );
};

export default Demo;

Link with ellipsis

Link can be cropped with ellipsis by setting the width and using the ellipsis property in Link.Text. Hint with the full text will appear automatically on hover on the link, including addons. Learn more about ellipsis in Utils/Ellipsis.

import LinkExternalM from '@semcore/icon/LinkExternal/m';
import Divider from '@semcore/ui/divider';
import Link from '@semcore/ui/link';
import { Text } from '@semcore/ui/typography';
import React from 'react';

const Demo = () => {
  return (
    <Text size={300} display='flex'>
      <Text flex='0 0 auto'>Sep 3</Text>
      <Divider mx={4} orientation='vertical' />
      <Link href='#'>
        <Link.Text w={480} ellipsis={true}>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque iusto, sed!
          Asperiores, consectetur deserunt et ipsam omnis quae repellendus velit veniam.
          Asperiores dicta dolor ducimus enim fugit laborum minima reprehenderit?
        </Link.Text>
        <Link.Addon mt='-3px'>
          <LinkExternalM />
        </Link.Addon>
      </Link>
    </Text>
  );
};

export default Demo;

Link without visible text

If a link has no visible text, it's important to add a hint explaining where the link leads to. This can be done using either title or aria-label. Both will enable a visible hint on hover and an aria-label for assistive technology.

import HomeM from '@semcore/icon/Home/m';
import LinkExternalM from '@semcore/icon/LinkExternal/m';
import Link from '@semcore/ui/link';
import React from 'react';

const Demo = () => {
  return (
    <>
      <Link addonLeft={HomeM} aria-label='Home page' href='#' />
      <Link ml={4} href='#' title='Go to the next page'>
        <Link.Addon>
          <LinkExternalM />
        </Link.Addon>
      </Link>
    </>
  );
};

export default Demo;

Disabled link

import ChevronRightM from '@semcore/icon/ChevronRight/m';
import Link from '@semcore/ui/link';
import React from 'react';

const Demo = () => {
  return (
    <>
      <Link ml={4} href='#' size={300} disabled>
        <Link.Text>Disabled link</Link.Text>
        <Link.Addon>
          <ChevronRightM />
        </Link.Addon>
      </Link>
    </>
  );
};

export default Demo;