Link

Text link in slate, blue, and muted colors.

Usage

svelte

<script lang="ts">
  import { Link } from "@milandekruijf/ui/svelte";
</script>

<Link href="/design/components">Components</Link>
<Link color="blue" href="https://milandekruijf.com">
  milandekruijf.com
</Link>

Examples

Colors

slate blue muted

<script lang="ts">
  import { Link } from "@milandekruijf/ui/svelte";
  import { row } from "./styles.js";
</script>

<div class={row}>
  <Link href="#">slate</Link>
  <Link color="blue" href="#">blue</Link>
  <Link color="muted" href="#">muted</Link>
</div>

Props

Prop	Type	Default	Description
color?	`"slate" \| "blue" \| "muted"`	"slate"	Slate keeps the default text color, blue uses the brand accent, muted sits a step lighter.
mode?	`"auto" \| "light"`	"auto"	`auto` follows the theme; `light` pins to the light slate scale.
href?	`string`	"#"	Destination; external URLs open in a new tab.
target?	`string`	—	Overrides the target; defaults to `_blank` for external URLs.
rel?	`string`	—	Overrides `rel`; defaults to `noopener noreferrer` for external URLs.
download?	`string \| boolean`	—	Marks the link as a download.
class?	`string`	—	Extra classes merged after the recipe classes.
children	`Snippet`	—	Visible link text.

Remaining props are forwarded to the underlying `<a>` element.