Navigation
SignpostLink
A prominent navigational link: the signpost to a task's starting point.
Import
import { SignpostLink } from "@loamui/core";Usage
Every example has a CSStab. That’s the real, complete stylesheet for the component: plain, static CSS, with nothing running in the browser.
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.
Contexts
The arrow's circle is a solid status fill, so a context region recolours it like any other component.
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.
Guidance
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.
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.
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.
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, …). |