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.

Props

EuiLink

Extends ButtonHTMLAttributes, AnchorHTMLAttributes


Prop	Description and type	Default value
Prop onClick#	Description and type Type: `MouseEventHandler<HTMLAnchorElement> \| MouseEventHandler<HTMLButtonElement>`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop type#	Description and type Type: `EuiLinkType`	Default value `button`
Prop color#	Description and type Any of our named colors. Type: `"text" \| "accent" \| "primary" \| "success" \| "warning" \| "danger" \| "subdued" \| "ghost"`	Default value `primary`
Prop external#	Description and type Set to true to show an icon indicating that it is an external link; Defaults to true if `target="_blank"` Type: `boolean`	Default value
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<HTMLAnchorElement \| HTMLButtonElement>`	Default value