Link in text

By default, links are displayed as inline-block and don’t wrap properly within the text. To achieve proper wrapping and underlining of links, set noWrap=false and inline=true.

import React from 'react';
import FormatText from '@semcore/format-text';
import { List } from '@semcore/typography';
import Link from '@semcore/link';
import LinkExternalM from '@semcore/icon/LinkExternal/m';

const Demo = () => {
  return (
    <div>
      <FormatText size={'l'}>
        <p>
          The Intergalactic Design System is so cutting-edge that even black holes are jealous of
          its sleek interface,{' '}
          <Link href='#' inline noWrap={false}>
            <Link.Text>look at them</Link.Text>
            <Link.Addon>
              <LinkExternalM />
            </Link.Addon>
          </Link>
          .
        </p>
        <p>
          Aliens from distant galaxies use it to{' '}
          <Link href='#' inline noWrap={false}>
            create otherworldly websites{' '}
          </Link>{' '}
          that are so user-friendly, even a space-faring cat with paws can navigate them.
        </p>
        <p>Look at these:</p>
      </FormatText>
      <List size={300}>
        <List.Item>
          <Link href='#' noWrap={false}>
            Alien fashionistas on Mars are rocking sleek spacesuits with astonishing components.
          </Link>
        </List.Item>
        <List.Item>
          <Link href='#' noWrap={false}>
            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>
    </div>
  );
};

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 React from 'react';
import Link from '@semcore/link';
import CheckM from '@semcore/icon/Check/m';
import ChevronRightM from '@semcore/icon/ChevronRight/m';
import FormatText from '@semcore/format-text';

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

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 React from 'react';
import Link from '@semcore/link';

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 React from 'react';
import Button from '@semcore/button';
import PlusM from '@semcore/icon/MathPlus/m';

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

There are two moments you need to consider when using link with addons and ellipsis:

• To properly display a link with ellipsis inside a flex block, you need to use a hack with min-width: 0px.
• When the text has an overflow:hidden property, it may overlap with a vertical addon. To avoid this, wrap the content in a flex container with vertical alignment.

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

const Demo = () => {
  return (
    <Flex>
      <Text flex='0 0 auto'>Sep 3</Text>
      <Divider mx={4} orientation='vertical' />
      <Link w='100%' wMin={0} href='#'>
        <Flex alignItems='center'>
          <Link.Text w='100%' inline noWrap>
            <Text w='100%' inline noWrap>
              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?
            </Text>
          </Link.Text>
          <Link.Addon>
            <LinkExternalM />
          </Link.Addon>
        </Flex>
      </Link>
    </Flex>
  );
};

export default Demo;

Link without visible text

If a link has no visible text, it's important to add a Hint with a label of the link function for accessibility purposes. Adding a Hint will automatically provide an aria-label for the link.

import React from 'react';
import Link from '@semcore/link';
import HomeM from '@semcore/icon/Home/m';
import LinkExternalM from '@semcore/icon/LinkExternal/m';
import { Hint } from '@semcore/tooltip';

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

export default Demo;

Disabled link

import React from 'react';
import Link from '@semcore/link';
import ChevronRightM from '@semcore/icon/ChevronRight/m';
import FormatText from '@semcore/format-text';

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

export default Demo;