Foundations

Links

A link is a navigational element that guides users to external resources or other sections of the product.
View source
1
import {TargetSize16Px} from '@coveord/plasma-react-icons';
2


3
export default () => (
4
    <a className="link" href="/foundations/Links">
5
        Link <TargetSize16Px height={16} />
6
    </a>
7
);

Examples

Disabled
1
import {TargetSize16Px} from '@coveord/plasma-react-icons';
2


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


3
export default () => (
4
    <button className="link" onClick={() => alert('The button was clicked')}>
5
        Link <TargetSize16Px height={16} />
6
    </button>
7
);

No guidelines exist for Links yet.

Create guidelines