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 acolor. 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
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. "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; boolean | Default value |
Prop ref# | Description and type Allows getting a ref to the component instance. LegacyRef<HTMLAnchorElement | HTMLButtonElement> | Default value |