Link component

States

A link have four basic states which differ in color. This is to indicate the current state of the link.

Default, Hover and Active on un-visited links are using the blue primary colors from the CVI palette, while visited links (default, active, hover) is using the build-in browser default.

Tooltip on links

It is preferable to have a tooltip that shows when hovering a link. The tooltip should give the user an understanding of, what will happen when clicking the link.

Usage

Import like this:

import { MaterialLink } from '@tdcerhverv/link';

Use like this:

<MaterialLink {...props}>{children}</MaterialLink>

Props

interface ILink {
  children?: ReactNode;
  title?: string; // adds content to the Tooltip
  className?: string;
  // and any other Material-UI link props
}

See the rest of the props in material-ui docs

Tags

link, a, anchor, href, material-link