---
title: SignpostLink
description: Signpost the way into a task.
---

> LoamUI documentation, generated from the same source as the live page —
> treat it as authoritative for `@loamui/core`.

# SignpostLink

A prominent navigational link: the signpost to a task's starting point.

## Import

```tsx
import { SignpostLink } from "@loamui/core";
```

## Usage

### Basic

A real <a> with a circled arrow. Use it where a page hands over to a task: the start of an application, a checkout, a service.

```tsx
<SignpostLink href="#apply">Start your application</SignpostLink>
```

### Contexts

The arrow's circle is a solid status fill, so a context region recolours it like any other component.

```tsx
<div style={{ "--loam-context": "danger" }}>
  <SignpostLink href="#appeal">Appeal this decision</SignpostLink>
</div>
```

### Router link

Substitute the element with render to keep client-side navigation. The label may live on either element, and the arrow anatomy wraps it.

```tsx
<SignpostLink render={<Link href="/apply">Start your application</Link>} />
```

## When to use it

- To signpost the way into a task from a content page: 'Start your application', 'Book an appointment', 'Go to checkout'.
- Where a design asks for a button-sized call-to-action that navigates: this keeps real link semantics with button-scale prominence.
- One per destination: a signpost stands out because the links around it are plain.

## When not to

- For actions: anything that submits, mutates or confirms is a Button. A signpost only ever goes somewhere.
- For links inside prose or navigation lists: ordinary links carry those; a page of signposts signposts nothing.
- Side by side with a Button of equal weight: two competing calls-to-action split the click. Decide which one the page is for.

## How it works

### Going, not doing

The element must match the behaviour: navigation is an <a>, actions are a <button>. A signpost is the navigational counterpart to Button: link semantics (right-click, middle-click, open-in-new-tab, link announcement) with enough visual weight to carry a call-to-action. If the destination mutates state when it loads, it was an action all along; use a Button and a handler.

### The arrow is decoration

The circled arrow is aria-hidden: assistive technology hears only the label and the link role. It rides the font size in em, so the whole signpost rescales as one piece if a consumer changes font-size. No size prop.

## Accessibility

- Renders a real <a>, so focus, Enter activation and the link role come from the platform.
- The arrow glyph is aria-hidden decoration; the accessible name is exactly the label text.
- The label underlines on hover with the primary decoration colour, matching the page-wide link affordance.
- The circle/arrow pairing uses the audited solid-fill tokens, so it holds contrast in every scheme and context.

## Props

Status is not a prop: it comes from the surrounding `--loam-context` region (see the Contextualism guide).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `RenderProp` | — | Substitute the built-in <a>, e.g. a router link: render={<Link href=… />}. |
| `...others` | `AnchorHTMLAttributes<HTMLAnchorElement>` | — | All native <a> props are forwarded (href, target, …). |

