Foundations

Links

A link is a navigational element that guides users to external resources or other sections of the product.
1
import {TargetSize16Px} from '@coveord/plasma-react-icons';
2
3
const Demo = () => (
4
<a className="link" href="/foundations/Links">
5
Link <TargetSize16Px height={16} />
6
</a>
7
);
8
export default Demo;

Examples

Disabled
1
import {TargetSize16Px} from '@coveord/plasma-react-icons';
2
3
const Demo = () => (
4
<a className="link disabled" href="/foundations/Links">
5
Link <TargetSize16Px height={16} />
6
</a>
7
);
8
export default Demo;
A button disguised as a link
1
import {TargetSize16Px} from '@coveord/plasma-react-icons';
2
3
const Demo = () => (
4
<button className="link" onClick={() => alert('The button was clicked')}>
5
Link <TargetSize16Px height={16} />
6
</button>
7
);
8
export default Demo;

No guidelines exist for Links yet.

Create guidelines