The Link component is a navigational element that allows users to navigate to internal or external pages. It supports variants, accessibility attributes, and can wrap text or other components to apply consistent styling and behavior. Useful for creating an intuitive, interconnected user experience.
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.
Two variants are available: primary (default) and secondary.
Use the disabled prop to disable interaction and add the appropriate ARIA attribute.
Four sizes are available: xs, sm, md (default) and lg.
Set isExternal to true to automatically add an <ExternalLinkIcon /> and apply hover effects.
If your link contains multiple lines of text, you can use multiline to control underline behavior.
When using target="_blank", the rel="noopener noreferrer" attribute is automatically added for security.
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.
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