Miltinson.Design system
GitHub

RuleLink

Ink-underline arrow link for marketing pages.

moleculesSource
import { RuleLink } from '@elirobinson/react/components/molecules/RuleLink';

Styles: @elirobinson/react/styles/molecules/RuleLink.css — already included when you import @elirobinson/react/styles.css.

View all coaching guides
Show code
import { RuleLink } from '@elirobinson/react/components/molecules/RuleLink';

export default function Basic() {
  return <RuleLink href="/guides">View all coaching guides</RuleLink>;
}

When to use it

Use RuleLink for the ink-underline arrow link that closes out a marketing section — "View all guides," "See what I build." It's a real <a> with an arrow glyph appended, not a button dressed up as a link — reach for it anywhere a Button would be the wrong semantic because the action is navigation, not a command.

In a list

RuleLink reads well stacked as a set of section links — a services page footer, a set of "jump to" pointers.

See what I buildBrowse the storeGet in touch
Show code
import { RuleLink } from '@elirobinson/react/components/molecules/RuleLink';

export default function List() {
  return (
    <div className="demo-col">
      <RuleLink href="/services">See what I build</RuleLink>
      <RuleLink href="/store">Browse the store</RuleLink>
      <RuleLink href="/contact">Get in touch</RuleLink>
    </div>
  );
}

Props

No props of its own beyond the inherited HTML attributes.

Also accepts all AnchorHTMLAttributes<HTMLAnchorElement> props.

Accessibility

  • Renders a native <a> with a trailing arrow <svg aria-hidden="true"> — the arrow is purely decorative, so a screen reader reads only the link text.
  • Accepts all standard anchor attributes (href, target, rel, and so on) since it inherits AnchorHTMLAttributes<HTMLAnchorElement> — always pass a real href.
  • Keyboard: native anchor behavior — Tab focuses it, Enter follows the link. There's no Space-to-activate, matching how every other link on the page behaves.
  • The ref forwards to the underlying <a> element.

Do

  • Write the label as a destination, not a verb — "View all guides," not "Click here."
  • Always give it a real href so middle-click and cmd-click work.
  • Use it to close out a section on a marketing or content page.
  • Keep the label short enough that the arrow reads as a natural continuation.

Don't

  • Use RuleLink for an action that doesn't navigate — submitting, opening a dialog — that's Button.
  • Pair it with an onClick that prevents default navigation; that breaks the "it's just a link" contract.
  • Use it inside a hierarchy trail — that's what Breadcrumb is for.
  • Stack more than a handful in one place; past that it stops reading as a curated set of links.