[ @sdxc/ui ]

Link

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

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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="/api/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="/examples/settings/danger" color="danger">
			delete this workspace
		</Link>
		.
	</p>

	<p mix={[m(0), text("sm"), fg("neutral")]}>
		<Link href="/examples/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 remix

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

Danger color

Deleting removes every issue and comment for everyone at Acme: delete this project.

View code

<p mix={[m(0), text("sm"), fg("neutral")]}>
	Deleting removes every issue and comment for everyone at Acme:{" "}
	<Link href="#delete-project" color="danger">
		delete this project
	</Link>
	.
</p>

Disabled

Billing settings open once an owner adds a payment method.

View code

<p mix={[m(0), text("sm"), fg("neutral")]}>
	<Link aria-disabled="true">Billing settings</Link> open once an owner adds a payment method.
</p>

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.