Links navigate. Buttons perform actions.
.iz-link is ordinary inline/editorial navigation — restrained,
underlined, clearly Irozon, and always a real <a>. It sits
alongside the button hierarchy rather than inside it:
Signature CTA and Button
cover actions; Link covers navigation.
.iz-link — on any real <a> with an href.data-directional — for "Learn more →" style links; see below.aria-disabled="true" — only where a consumer genuinely needs a non-native disabled link.Green-family on light. Lime on dark.
Link text carries real brand identity — but not raw --irozon-green,
which falls well short of WCAG AA (~2.2:1) against a light surface at normal
text size. --color-link resolves to a contrast-adjusted Green/Ink
mix on light surfaces instead (~4.9:1 against White — still clearly reads as
Green, not Ink), and to the actual --irozon-lime primitive on dark
surfaces, where Lime already has excellent contrast. The underline
(--color-link-decoration) stays the pure brand primitive in both
themes, since a decoration isn't held to text contrast minimums. Hover
strengthens the underline rather than shifting text color.
<a class="iz-link" href="/services">
Explore services
</a>"Learn more →" without a second component.
A modifier, not a new component — data-directional lays out a real,
aria-hidden icon after the label and nudges it a few pixels toward
its semantic direction on hover/focus. Motion communicating direction is allowed
under Irozon's motion principle; the icon is never generated from a
pseudo-element, and the nudge flips automatically in RTL via :dir(rtl).
<a class="iz-link" data-directional href="/projects">
<span>Explore projects</span>
<svg class="iz-link__icon" aria-hidden="true">...</svg>
</a>Underline does the talking.
Focus-visible is a real outline, not a color change alone — obvious without looking like a button. No purple visited state; no lift or scale on press.
aria-disabled="true" — muted, non-interactive
Visual weight and semantics are independent.
A link may be styled as .iz-button when navigation is presented as a
strong CTA — the class controls appearance, not the element. Its semantic element
remains <a>, because it navigates. Compare:
<a class="iz-button"> — navigates, styled as a strong CTA
<button class="iz-button"> — performs an action, no navigation
Rules
- If it navigates, it's an
<a>— even styled as.iz-button. - If it performs an action in place, it's a
<button>— never a styled<a href="#">with a click handler standing in for one. .iz-linkis for ordinary navigation;.iz-buttonis for a navigation moment that deserves CTA-level weight. Most links stay.iz-link.
Checked, not assumed.
.iz-link is a real <a href="..."> — never a <div> or a <span> with a click handler standing in for navigation.aria-hidden="true" — the visible label text already carries the meaning; the arrow is decorative reinforcement, not a second source of information.prefers-reduced-motion: reduce; the underline strengthening on hover changes instantly instead of easing.