Welcome UI - Link

import { Link } from 'welcome-ui/Link'

const Example = () => {
  return <Link href="#">Link</Link>
}

export default Example

Examples

A flexible link component that can receive an as prop to render a custom component (like React Router’s Link) while keeping styling and accessibility intact.

Variants

Two variants are available: primary (default) and secondary.

Disabled

Use the disabled prop to disable interaction and add the appropriate ARIA attribute.

External link

Set isExternal to true to automatically add an <ExternalLinkIcon /> and apply hover effects.

Inline links

If your link contains multiple lines of text, you can use multiline to control underline behavior.

Security

When using target="_blank", the rel="noopener noreferrer" attribute is automatically added for security.

Text component

By default, Link wraps text nodes and certain elements in a styled Wrapper.
You can force text styling to inherit from the parent using this wrapper.

Underlined by default

Link underlines by default all string children, regardless of the parent element. This includes:

Plain text nodes
Text components
Any element (span, p, div, etc.) whose children is a single string
Components with as="span"
Components with data-wui-link prop