TextLink

TextLink is text that does something or goes somewhere, with no underline until the pointer is over it. It is the bottom step of the emphasis ladder, below a frameless button (Button): use it where even a frameless button would be too much weight, such as Forgot Password on a sign-in page, Sign Out under a server list, or a See All beside a section title.

跟随页面浅色深色并排

When to use

Variants

The variant follows where the link sits, not how important the action is.

Why the position decides. On its own, a TextLink is the quietest control on the screen, so it is muted: it must not compete with the screen's text or its buttons. Inside a sentence, the same muted grey would sit lighter than the words around it and read as disabled, so there it takes the ink of body text and stands out by weight instead. Neither variant is pink, at rest or on hover: pink belongs to the one primary button.

Why the underline comes on hover. The underline is the hover signal for every piece of clickable text in raft-ui, so people learn it once (Clickable text). At rest, the weight and color above and where the link sits say it can be clicked; an underline on every quiet control would add a line under each of them on a screen that is read for hours.

States

• Hover: the text underlines in its own color, 1.5px thick, 3px below the baseline; a muted link also turns ink.
• Disabled: the text turns foreground-disabled and nothing changes on hover, so it no longer reads as something to press.

跟随页面浅色深色并排

• Focus: the shared focus ring (States), on a 2px radius.

Behavior

• TextLink has no size of its own: it takes the size and line height of the text around it, so it sits on the baseline inside a sentence and cannot make the line taller. Standing alone, give its container the text size.
• It has no box, padding or minimum height. Don't put it where it is the only thing a finger must hit on a phone; that needs a Button.

Content

• Start with a verb, or name the place: Forgot Password, Sign Out, See All.
• Use Title Case, like every button label (Writing).

Accessibility

TextLink renders a native button type="button". For a way somewhere, render a real link so it opens in a new tab and announces as a link: render={<a href="…" />}.

• disabled is the native attribute, so it works only on the button form: the button leaves the tab order and takes the disabled look. A link has no disabled. When a way somewhere is unavailable, don't render the link; say why in the text instead.

Rules

• Don't use TextLink to fit one more action into a crowded row. It is the quietest control on a screen, not a smaller button.
• Don't color it, and don't underline it at rest. Emphasis comes from weight and ink, so pink stays with the one primary button, and the underline stays the hover signal.