Link

A native anchor for inline navigation, always underlined so its affordance never rests on color alone.

Every package is published to npm and documented here — start with the component catalogue, or read the guides if you are wiring one up for the first time.

The source lives on GitHub, and release notes land in the changelog.

Removing a workspace takes its members and history with it: delete this workspace.

Transferring ownership needs a second owner on the account.

View code

<div mix={[vstack({ gap: 3, align: "stretch" })]}>
	<p mix={[m(0), text("sm"), fg("neutral")]}>
		Every package is published to npm and documented here — start with the{" "}
		<Link href="/docs/packages/ui">component catalogue</Link>, or read the{" "}
		<Link href="/docs">guides</Link> if you are wiring one up for the first time.
	</p>

	<p mix={[m(0), text("sm"), fg("neutral")]}>
		The source lives on{" "}
		<Link href="https://github.com/sergiodxa" target="_blank" rel="noreferrer">
			GitHub
		</Link>
		, and release notes land in the changelog.
	</p>

	<p mix={[m(0), text("sm"), fg("neutral")]}>
		Removing a workspace takes its members and history with it:{" "}
		<Link href="/settings/danger" color="danger">
			delete this workspace
		</Link>
		.
	</p>

	<p mix={[m(0), text("sm"), fg("neutral")]}>
		<Link href="/settings/transfer" aria-disabled="true">
			Transferring ownership
		</Link>{" "}
		needs a second owner on the account.
	</p>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Link } from "@sdxc/ui";

Renders a native <a> host, colored through the data-color attribute contract and underlined unconditionally. aria-disabled="true" mutes the link, but only removing or neutralizing href actually stops navigation.

Examples

<Link href="/delete" color="danger">{t("actions.delete")}</Link>

<Link href="/settings" aria-disabled="true">{t("nav.settings")}</Link>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Types

Name	Values	What it decides
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role, each mapped to its matching `--ui-*` variables.