Link
EuiLink is any anchor or button element that is designed to display nicely within a block of text. It also provides more anchor-specific styling onto links and makes sure they are accessible.
External links
Setting target="_blank"
defaults to external={true}
. This adds an icon indicator instructing users that
a new window will open. You can also manually apply this icon in case you handle the target behavior by other means.
Coloring links
Like any other button component, links can be passed a color
. Note that the ghost
type should only be used on dark backgrounds (regardless of theming) as it will always create a white link.
Disabled links
When an EuiLink is passed an onClick
method, and is not passed an href
, it can optionally
be set todisabled
which disables the click behavior, and removes the link styling.
Link validation
To make links more secure for users, EuiLink and other components that accept an href
prop become disabled
if that href
uses the javascript:
protocol. This helps protect consuming applications
from cross-site scripting (XSS) attacks and mirrors React's
planned behavior
to prevent rendering of javascript:
links.