LinkButton

A navigation action styled to read as a button rather than inline text.

No projects yet

Export CSV Upgrade plan Transfer ownership

View code

<div mix={[vstack({ gap: 5, align: "center" })]}>
	<p mix={[m(0), text("sm"), weight("medium")]}>No projects yet</p>

	<div mix={[hstack({ gap: 3, align: "center" }), flexWrap()]}>
		<LinkButton href="/projects/new">
			<PlusIcon />
			Create project
		</LinkButton>
		<LinkButton href="/docs/packages/ui" color="neutral" variant="outline">
			Read the docs
		</LinkButton>
		<LinkButton href="/projects" color="neutral" variant="ghost">
			Cancel
		</LinkButton>
	</div>

	<div mix={[hstack({ gap: 3, align: "center" }), flexWrap()]}>
		<LinkButton href="/export/projects.csv" download size="sm" color="neutral" variant="outline">
			<DownloadIcon />
			Export CSV
		</LinkButton>
		<LinkButton href="/billing/upgrade" size="lg" color="success">
			Upgrade plan
		</LinkButton>
		<LinkButton href="/settings/transfer" variant="outline" aria-disabled="true">
			Transfer ownership
		</LinkButton>
	</div>
</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 { LinkButton } from "@sdxc/ui";

Renders a native <a> host, colored and shaped through the same color, variant, and size data attributes as Button. aria-disabled="true" keeps it focusable while dimmed, so drop href too for full inertness.

Examples

<LinkButton href="/projects" color="neutral" variant="outline" size="sm">{t("actions.cancel")}</LinkButton>

<LinkButton href="/export/report.csv" download aria-disabled={!hasReport || undefined}>{t("actions.download")}</LinkButton>

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.
`Variant`	`"solid" \| "outline" \| "ghost"`	Visual weight the link renders with: a solid fill with an on-solid foreground, a transparent fill with a strong colored border, or a fully transparent fill with just a colored label.
`Size`	`"sm" \| "md" \| "lg"`	Size variant controlling the link's padding and font size.