Distinguish the semantics of buttons and links more clearly

[ek-so]

Problem

Currently, we have links that are styled like buttons but remain links semantically, and buttons that are styled like links (flush buttons) but are still buttons semantically. On top of that, we can also make links be semantically buttons and vice versa — all of which leads to quite a bit of confusion.

Proposal

I suggest we consider a more clear way to differentiate these two by function:

• EuiLinks. Always are links, underline on hover, no icons. Are not buttons in any case.
• EuiButtons. Have different styling, typically are btns semantically.
  • Can be links semantically, if they are set so — e.g. any button can be made a link semantically, be it empty, default or flush.

When you decide which component you want to use, you do it with one question: do I need just a link, or smth else, more complex? (e.g. background on hover, to include icons etc.)

• No: use EuiLink
• Yes: use EuiButton; style it in a way you need and make a link semantically.

[ryankeairns]

iirc, there are alignment needs that factored into what we have today. This is something else to clarify as we potentially head down this path. In other words, vertically aligning links to other buttons is pain... guidance may be to use an empty/flush button, for example.

I suspect we will at least need an 'external link' icon to appear with links. This may be reserved for use within the EuiLink component however and not advised to be done directly.