Link button

01Preview

Change the controls to try every supported combination. With an href the component renders a link; without one, a button. The code updates with it.

import { LinkButton } from '@nuton/ui'

<LinkButton href="/library" trailingIcon={<RiArrowRightSLine />}>View all lessons</LinkButton>

02Installation

1. Add the packages

pnpm add @nuton/ui @nuton/tokens @remixicon/react

npm install @nuton/ui @nuton/tokens @remixicon/react

yarn add @nuton/ui @nuton/tokens @remixicon/react

Peer dependencies: react and react-dom 18 or later. @remixicon/react supplies the icons you pass to link buttons (Remix Icon is Nuton's icon set, D1).

2. Load tokens and component styles once

// app/layout.tsx (or your app's entry file)
import '@nuton/tokens/tokens.css' // --nu-* design tokens
import '@nuton/ui/styles.css'     // component styles (uses the tokens)

Link button uses the Label type styles, which read --nu-font-body (Inter). If you already set this up for Button, there's nothing more to do.

03Usage

import { LinkButton } from '@nuton/ui'
import { RiArrowRightSLine } from '@remixicon/react'

// Navigation: renders <a href>
<LinkButton href="/library" trailingIcon={<RiArrowRightSLine />}>View all lessons</LinkButton>

// In-page action: renders <button type="button">
<LinkButton onClick={resendCode}>Resend code</LinkButton>

• The default is gray, md, no underline: Text/Sub-600 at 14px, darkening to Strong-950 on hover.
• href decides the element. Pass it to go somewhere; leave it out to do something on this page.
• Keep labels short and specific: “View all lessons”, “Back to Biology 101”, “Resend code”. Sentence case.
• Use it for secondary, low-emphasis actions. The main action in a view is a Button.
• Pass Remix icons through leadingIcon / trailingIcon. They're decorative and hidden from screen readers.

04Variants and sizes

Three props shape a link button: tone sets the colour, size sets the type scale and underline marks it as a link in running text. Every tone works with every size and underline setting.

Link or button

The same component renders two different elements. With href it renders <a href>, so people can open it in a new tab, copy it and hear it announced as a link. Without href it renders <button type="button"> for an action on the current page. Both look identical.

<LinkButton href="/spaces/biology-101" tone="primary">Open Biology 101</LinkButton>
<LinkButton tone="primary" onClick={markAllRead}>Mark all as read</LinkButton>

Tone × size

Sizes

<LinkButton href="/library" size="md">View all lessons</LinkButton>
<LinkButton href="/library" size="sm">View all lessons</LinkButton>

Values from the component CSS and tokens, matching Figma's Medium (20) and Small (16). In Figma, the small underlined variants use 14px text; the code follows the majority pattern of 12px (C9). The component has no padding, so the hit area is the text and icons.

Underline

<p>
  Your notes are saved in this space.{' '}
  <LinkButton href="/spaces/biology-101/notes" tone="primary" underline>Open notes</LinkButton>
</p>

underline underlines the label only (2px offset), never the icons. Use it whenever the link sits in running text, so it isn't marked by colour alone (WCAG 1.4.1).

Icons

<LinkButton href="/spaces/biology-101" leadingIcon={<RiArrowLeftSLine />}>Back to Biology 101</LinkButton>
<LinkButton href="/library" tone="black" trailingIcon={<RiArrowRightSLine />}>View all lessons</LinkButton>
<LinkButton href="https://help.nuton.app" target="_blank" rel="noreferrer" tone="primary" trailingIcon={<RiExternalLinkLine />}>
  Help Center (opens in a new tab)
</LinkButton>

Icons are wrapped in aria-hidden spans, so they never carry meaning. There's no icon-only mode: children is required. For an icon-only action, use Button with iconOnly.

05States and interactions

State tokens

Each tone sets two component tokens. Override them on a wrapper only for a documented exception.

Disabled uses --nu-text-disabled-500 directly. Focus (:focus-visible) uses --nu-link-color-hover. There's no pressed or visited style; Figma defines neither.

06Composition examples

Section header link

A “View all” link next to a list heading. It navigates, so it has an href.

<strong>Recent lessons</strong>
<LinkButton href="/library" tone="black" size="sm" trailingIcon={<RiArrowRightSLine />}>View all</LinkButton>

Back link

<LinkButton href="/spaces/biology-101" leadingIcon={<RiArrowLeftSLine />}>
  Back to Biology 101
</LinkButton>

Form helper action

An in-page action under a field. It has no href, so it renders a button. During the cooldown it stays enabled and explains the wait, because a disabled button can't keep focus.

<Field label="Join code" hint="Ask your teacher for the 6-digit code for Biology 101.">
  <Input size="sm" inputMode="numeric" value={code} onChange={(e) => setCode(e.target.value)} />
</Field>
<LinkButton size="sm" onClick={resend}>
  {wait > 0 ? `Resend code in ${wait}s` : 'Resend code'}
</LinkButton>

Quiet destructive action

The error tone for a per-row action. Each button's aria-label names its lesson; focus moves to the next row after a removal.

<ul aria-label="Lessons in Biology 101">
  {lessons.map((lesson, i) => (
    <li key={lesson}>
      {lesson}
      <LinkButton tone="error" size="sm" aria-label={`Remove ${lesson}`} onClick={() => remove(i)}>
        Remove
      </LinkButton>
    </li>
  ))}
</ul>

On a dark surface

<div role="status" className="banner">
  Lesson published to Biology 101.
  <LinkButton tone="white" underline onClick={undo}>Undo</LinkButton>
</div>

Only use white on Bg/Strong-950 or a similarly dark surface. On white it's invisible.

Navigation that looks like a button

Link button is the current answer for navigation (C27). Button always renders <button> and has no link mode, so when a step navigates, use a link button rather than a button with an onClick.

07API reference

Props

Styling hooks

The component renders .nu-link-button with data-tone, data-size and data-underline, plus .nu-link-button__label and .nu-link-button__icon inside. Use props rather than styling these. The component tokens --nu-link-color and --nu-link-color-hover (see State tokens) are the supported override points.

Accessibility

You must: pass href for navigation and leave it out for actions; give repeated labels a unique aria-label (“Remove Photosynthesis basics”); say in the label when a link opens a new tab; keep at least 24px between link buttons outside running text.

Figma mapping

08Guidelines and related components

Do and don't

Common mistakes

• Passing href="#" with an onClick to get a link look for an action. Leave out href; it renders a button.
• Several “Remove” or “View all” links on one screen with no aria-label, so they all sound the same.
• Opening a new tab with target="_blank" without saying so in the label.
• Packing link buttons tightly side by side, which makes their 16–20px targets hard to hit.

Related components

• ButtonMain and secondary actions in the current view.
• Button groupA segmented set of related options or actions.
• Inputs and fieldsForm controls that helper link buttons sit beside.
• ColourThe text and state tokens behind each tone.