Composites & Sections · 12 Props

Link

Inline text link with tone, variant (solid/subtle/none), weight, icon support, and dispatch prop for emitting custom window events.

Composites & Sections 12 Props

src/components/blocks/Link.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
href *	string	—
ariaLabel	string	—
attrs	any	—	passthrough attrs for Alpine/data/aria/etc.
class	string	""
dispatch	any	—	Dispatcht ein CustomEvent auf window beim Klick. Kurzform: string (= event name). Langform: { event, detail? }
icon	string	—
iconClass	string	size-[1.05em] shrink-0
iconPosition	string	end	"start" \| "end"
label	string	—	NEW: label fallback if no default slot
rel	string	—
target	string	—	"_blank" \| "_self" \| "_parent" \| "_top"
title	string	—

Beispiele

Variants

solid, subtle, none.

Solid (default) Subtle None

{
  "type": "row",
  "props": {
    "gap": "md",
    "align": "center",
    "wrap": true
  },
  "blocks": [
    {
      "type": "link",
      "props": {
        "href": "#",
        "label": "Solid (default)",
        "variant": "solid"
      }
    },
    {
      "type": "link",
      "props": {
        "href": "#",
        "label": "Subtle",
        "variant": "subtle"
      }
    },
    {
      "type": "link",
      "props": {
        "href": "#",
        "label": "None",
        "variant": "none"
      }
    }
  ]
}

<Row gap="md" align="center" wrap>
  <Link href="#" label="Solid (default)" variant="solid" />
  <Link href="#" label="Subtle" variant="subtle" />
  <Link href="#" label="None" variant="none" />
</Row>

Tones

Tone coloring options.

Inherit Primary Accent Muted Error

{
  "type": "row",
  "props": {
    "gap": "md",
    "align": "center",
    "wrap": true
  },
  "blocks": [
    {
      "type": "link",
      "props": {
        "href": "#",
        "label": "Inherit",
        "tone": "inherit"
      }
    },
    {
      "type": "link",
      "props": {
        "href": "#",
        "label": "Primary",
        "tone": "primary"
      }
    },
    {
      "type": "link",
      "props": {
        "href": "#",
        "label": "Accent",
        "tone": "accent"
      }
    },
    {
      "type": "link",
      "props": {
        "href": "#",
        "label": "Muted",
        "tone": "muted"
      }
    },
    {
      "type": "link",
      "props": {
        "href": "#",
        "label": "Error",
        "tone": "error"
      }
    }
  ]
}

<Row gap="md" align="center" wrap>
  <Link href="#" label="Inherit" tone="inherit" />
  <Link href="#" label="Primary" tone="primary" />
  <Link href="#" label="Accent" tone="accent" />
  <Link href="#" label="Muted" tone="muted" />
  <Link href="#" label="Error" tone="error" />
</Row>

With Icon

Icon right (default) or left via iconPosition.

External Link Download

{
  "type": "row",
  "props": {
    "gap": "md",
    "align": "center",
    "wrap": true
  },
  "blocks": [
    {
      "type": "link",
      "props": {
        "href": "#",
        "label": "External Link",
        "icon": "solar:arrow-right-up-linear",
        "tone": "accent"
      }
    },
    {
      "type": "link",
      "props": {
        "href": "#",
        "label": "Download",
        "icon": "solar:download-linear",
        "iconPosition": "start",
        "tone": "primary"
      }
    }
  ]
}

<Row gap="md" align="center" wrap>
  <Link href="#" label="External Link" icon="solar:arrow-right-up-linear" tone="accent" />
  <Link
    href="#"
    label="Download"
    icon="solar:download-linear"
    iconPosition="start"
    tone="primary"
  />
</Row>