Link CORE

On this page

See also

Button, ButtonGroup

Link component. It has focus highlight and can be customized with an icon

Use textContent binding or wrapping entire content with a span to avoid extra whitespace introduced by browser to a tag when closing tag wraps to a new line — otherwise distance to the icons will be bigger than it should be

Basic

Can be used on native a tag with routerLink or href

Icons

Can also be used on buttons as well as with icons on either side.

Appearances

Different color and underline styles.

Links by default have appearance which you can override with or

If you use no appearance, links would in tandem with an underline decoration to make them visible.

It would also work well together with dark theme and other text colors

If you want, you can dashed underline for any appearance using text-decoration-line: underline or switch link underline to dashed style by text-decoration-style: dashed

Long text

Multi line wrapping also works with icons.

Link can be written inline in text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text block and if no extra whitespace is introduced, the icon would wrap together with the last word inside the tag

GitHub StackBlitz