Links

Use links to link to other pages and actions.

Standard links

Use standard links for...

Visit hedia.com in the same tab, or visit hedia.com in a new tab.

import { link } from "@hedia/windfall/html/links";
import { paragraph } from "@hedia/windfall/html/paragraph";

paragraph(
	"Visit ",
	link({ href: "https://www.hedia.com/" }, "hedia.com"),
	" in the same tab, or visit ",
	link({ href: "https://www.hedia.com/", target: "_blank" }, "hedia.com"),
	" in a new tab.",
),

Link kinds

Use link kinds for...

Examples of a primary link, a secondary link, and a plain link.

import { LinkKind } from "@hedia/windfall/css/links";
import { link } from "@hedia/windfall/html/links";
import { paragraph } from "@hedia/windfall/html/paragraph";

paragraph(
	"Examples of a ",
	link({ href: "https://www.hedia.com/", kind: LinkKind.Primary }, "primary link"),
	", a ",
	link({ href: "https://www.hedia.com/", kind: LinkKind.Secondary }, "secondary link"),
	", and a ",
	link({ href: "https://www.hedia.com/", kind: LinkKind.Plain }, "plain link"),
	".",
),

Links styled as buttons

They look like buttons, but they are actually links.

See the buttons page for all the options you can use. Here are a few examples...

Primary extra-largeSecondary rounded extra-small
import { starBoldIcon } from "@hedia/iconly/bold";
import { deleteOutlineIcon } from "@hedia/iconly/outline";
import { ButtonKind, ButtonSize, ButtonShape } from "@hedia/windfall/css/buttons";
import { link } from "@hedia/windfall/html/links";

link(
	{
		href: "#",
		button: true,
		buttonKind: ButtonKind.Primary,
		buttonSize: ButtonSize.ExtraLarge,
	},
	"Primary extra-large",
),
link(
	{
		href: "#",
		button: true,
		buttonKind: ButtonKind.Secondary,
		buttonShape: ButtonShape.Rounded,
		buttonSize: ButtonSize.ExtraSmall,
	},
	"Secondary rounded extra-small",
),
link(
	{
		href: "#",
		button: true,
		buttonKind: ButtonKind.SecondaryDestructive,
		buttonShape: ButtonShape.Circular,
	},
	starBoldIcon(),
),
link(
	{
		href: "#",
		button: true,
		buttonKind: ButtonKind.Destructive,
		buttonShape: ButtonShape.Square,
	},
	deleteOutlineIcon(),
),