Links

A flexible link component supporting both navigation links and button-style links. Supports multiple variants, colors, underline styles, and can be used with router components. Automatically handles security attributes for external links.

Installation

Import

Usage

Use Link for navigation within your application or to external websites. Choose 'link' type for standard navigation links and 'button' type for action-oriented links. Use underline styles to control visual emphasis. For external links, always set target='_blank' - the component automatically adds security attributes. Use tooltips to provide additional context. Integrate with router libraries using the component prop.

Design Guidelines

Maintain consistent link styling throughout your application. Use underline='hover' for standard navigation links. Use button type links for primary actions. Choose colors that match your design system hierarchy. Keep link text concise and descriptive. Use tooltips sparingly for additional context.

Basic Usage

Simple navigation links with different underline styles

Button Style Links

Links styled as buttons with different variants and colors

External Links

Links to external websites with automatic security attributes

With Tooltips

Links with tooltip support for additional information

Router Integration

Using Link with React Router or other router components

packages.sections.api

Component props and API reference This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. For detailed documentation and examples, see the Style Props documentation.

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.description
`type`	`"link" \| "button"`	`"link"`	Type of link - "link" for navigation links, "button" for button-styled links
`variant`	`"solid" \| "outline" \| "text" \| "soft" \| "plain"`	`"solid"`	Visual variant of the link (applies to button type)
`color`	`"primary" \| "secondary" \| "neutral" \| "destructive" \| "success" \| "warning" \| "info"`	`"neutral"`	Color scheme of the link
`underline`	`"none" \| "hover" \| "always"`	`"hover"`	Underline style for link type
`linkSize`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Size of the link (applies to button type)
`component`	`CustomComponent`	—	Custom component to render instead of anchor tag (e.g., React Router Link)
`tooltip`	`string \| React.ComponentProps<typeof TooltipContent>`	—	Tooltip content to display on hover
`target`	`"_blank" \| "_self" \| "_parent" \| "_top"`	—	Link target attribute. When "_blank", automatically adds "noopener noreferrer" to rel
`rel`	`string`	—	Link rel attribute. Automatically enhanced for external links
`children`	`React.ReactNode`	—	Link content
`className`	`string`	—	packages.commonProps.className.description

Accessibility

Accessibility features and considerations

Links are keyboard accessible and include proper ARIA attributes. External links automatically include security attributes (noopener noreferrer) when target='_blank'. Use descriptive link text that makes sense out of context. Ensure sufficient color contrast for all link variants.

packages.title