Link inside the content
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
.
tsx
import React from 'react';
import FormatText from 'intergalactic/format-text';
import { List } from 'intergalactic/typography';
import Link from 'intergalactic/link';
import EditM from 'intergalactic/icon/Edit/m';
class Demo extends React.PureComponent {
render() {
return (
<div>
<FormatText size={'s'}>
<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.Addon>
<EditM />
</Link.Addon>
<Link.Text>look at them</Link.Text>
</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;
import React from 'react';
import FormatText from 'intergalactic/format-text';
import { List } from 'intergalactic/typography';
import Link from 'intergalactic/link';
import EditM from 'intergalactic/icon/Edit/m';
class Demo extends React.PureComponent {
render() {
return (
<div>
<FormatText size={'s'}>
<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.Addon>
<EditM />
</Link.Addon>
<Link.Text>look at them</Link.Text>
</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.
tsx
import React from 'react';
import Link from 'intergalactic/link';
import CheckM from 'intergalactic/icon/Check/m';
import ChevronRightM from 'intergalactic/icon/ChevronRight/m';
const Demo = () => {
return (
<>
<Link ml={4} href='#' size={300}>
<Link.Addon>
<CheckM />
</Link.Addon>
<Link.Text>Link</Link.Text>
<Link.Addon>
<ChevronRightM />
</Link.Addon>
</Link>
</>
);
};
export default Demo;
import React from 'react';
import Link from 'intergalactic/link';
import CheckM from 'intergalactic/icon/Check/m';
import ChevronRightM from 'intergalactic/icon/ChevronRight/m';
const Demo = () => {
return (
<>
<Link ml={4} href='#' size={300}>
<Link.Addon>
<CheckM />
</Link.Addon>
<Link.Text>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.
tsx
import React from 'react';
import Link from 'intergalactic/link';
class Demo extends React.PureComponent {
render() {
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;
import React from 'react';
import Link from 'intergalactic/link';
class Demo extends React.PureComponent {
render() {
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;
Links 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.
tsx
import React from 'react';
import { Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';
import Divider from 'intergalactic/divider';
import Link from 'intergalactic/link';
import EditM from 'intergalactic/icon/Edit/m';
class Demo extends React.PureComponent {
render() {
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>
<EditM />
</Link.Addon>
</Flex>
</Link>
</Flex>
);
}
}
export default Demo;
import React from 'react';
import { Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';
import Divider from 'intergalactic/divider';
import Link from 'intergalactic/link';
import EditM from 'intergalactic/icon/Edit/m';
class Demo extends React.PureComponent {
render() {
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>
<EditM />
</Link.Addon>
</Flex>
</Link>
</Flex>
);
}
}
export default Demo;
Accessibility
If a link has no visible text, it is important to add an aria-label attribute with a description of the link for accessibility purposes.
tsx
import React from 'react';
import Link from 'intergalactic/link';
import HomeM from 'intergalactic/icon/Home/m';
import ArrowRightM from 'intergalactic/icon/ArrowRight/m';
const Demo = () => {
return (
<>
<Link addonLeft={HomeM} aria-label='home page' href='#' />
<Link ml={2} aria-label='go to the next page' href='#'>
<Link.Addon>
<ArrowRightM />
</Link.Addon>
</Link>
</>
);
};
export default Demo;
import React from 'react';
import Link from 'intergalactic/link';
import HomeM from 'intergalactic/icon/Home/m';
import ArrowRightM from 'intergalactic/icon/ArrowRight/m';
const Demo = () => {
return (
<>
<Link addonLeft={HomeM} aria-label='home page' href='#' />
<Link ml={2} aria-label='go to the next page' href='#'>
<Link.Addon>
<ArrowRightM />
</Link.Addon>
</Link>
</>
);
};
export default Demo;