Link

Provide clear text links in content, descriptions, and navigation, with optional directional indicators.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Link to navigate to an address or resource. Use Button for an immediate action. Supply a real href rather than a placeholder address that makes a link behave like a button.

Supply a real href. target and rel control how the destination opens; disabled marks the link unavailable.
lines, tooltip, and onTruncate control truncation feedback. parts configures only the built-in Tooltip.

Import

import { Link } from '@snowui-design-system/components';

Usage

Variants

In text

Colors

Underline

Hover colors

Custom icons

Truncation

Disabled

API Reference

Property	Type	Default	Example	Description
`variant`	`LinkVariant`	`"default"`	`variant={value}`	Visual variant of the link.
`color`	`SnowUIColor \| string`	`"Black40"`	`color="Example"`	Normal text color. Black100, Black, or var(--black-100) hover as Black40; other colors hover as Black100 by default.
`href`	`string`	`—`	`href="/components"`	Navigation destination.
`target`	`string`	`—`	`target="Example"`	Where to open the destination.
`rel`	`string`	`—`	`rel="Example"`	Relationship between the current page and the destination.
`disabled`	`boolean`	`false`	`disabled`	Disable the link and its hover response.
`hoverColor`	`SnowUIColor \| string \| false`	`—`	`hoverColor="Example"`	Text color on hover. Defaults to the color-dependent hover value; false keeps the normal color. Trailing decoration still changes opacity from 0.4 to 1.
`underline`	`LinkUnderline`	`"none"`	`underline={value}`	When to show an underline. It covers link text but not trailing decoration or icons.
`lines`	`false \| 1`	`false`	`lines={value}`	Enable single-line truncation with an ellipsis when text exceeds the available link width.
`tooltip`	`TooltipProp`	`—`	`tooltip={value}`	Tooltip for truncated text. By default, show full text only when truncation actually occurs; false disables it. A string or Snippet supplies custom content, and an object passes Tooltip configuration.
`onTruncate`	`(isTruncated: boolean) => void`	`—`	`onTruncate={(value) => { /* handle value */ }}`	Callback when actual truncation state changes.
`children`	`Snippet`	`—`	`<Link>Content</Link>`	Link text and optional external slots.
`parts`	`ComponentPartsOf<{ Tooltip: typeof Tooltip }>`	`—`	`parts={partsOptions}`	Configure the built-in Tooltip. Explicit Tooltip children receive their own props directly.