# TextLink

> Underlined text for the quietest control on a screen, an action or a way somewhere; the bottom step of the button ladder.

Source: https://raft-design.botiverse.build/components/text-link. Generated from the current release; where it differs from what you remember, this page is right.

TextLink is underlined text that does something or goes somewhere. It is the bottom step of the emphasis ladder, below a frameless button ([Button](https://raft-design.botiverse.build/components/button.md#which-color)): use it where even a frameless button would be too much weight, such as Forgot Password on a sign-in page, Log Out under a server list, or a See All beside a section title.

```tsx
import { TextLink } from "@botiverse/raft-ui";

export function TextLinkPreviewContent() {
  return (
    <div className="flex flex-col items-start gap-4 text-footnote text-foreground-muted">
      <TextLink render={<a href="#forgot-password" />}>Forgot Password</TextLink>
      <p className="m-0">
        Don&apos;t have an account?{" "}
        <TextLink variant="strong" render={<a href="#create-account" />}>
          Create One
        </TextLink>
      </p>
    </div>
  );
}
```

## When to use

| Situation                                                              | Use                                                                       |
| ---------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| The quietest control on a screen, alone or inside a sentence           | TextLink                                                                  |
| Cancel or a minor action inside a dialog, sheet, menu, popover or card | [Button](https://raft-design.botiverse.build/components/button.md) `variant="ghost"`                           |
| Cancel or a minor action on a page                                     | [Button](https://raft-design.botiverse.build/components/button.md) `variant="default"`                         |
| A link inside rendered message or document content                     | The Markdown link, in the link blue ([Markdown](https://raft-design.botiverse.build/components/markdown.md)) |

## Variants

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

| Variant                     | Use for                                                                                                                                   |
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `variant="muted"` (default) | A link that stands on its own: Forgot Password, Log Out, See All. `foreground-muted`, 500, ink on hover.                                  |
| `variant="strong"`          | A link inside a sentence: "Don't have an account? Create One", a banner's "Manage Machines". Ink, 600, the underline turns pink on hover. |

**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 and underline instead. Neither variant is pink: pink belongs to the one primary button, so on a TextLink it appears only as the hover underline.

## States

- **Disabled:** the text turns `foreground-disabled` and the underline goes, so it no longer reads as something to press.

```tsx
import { TextLink } from "@botiverse/raft-ui";

export function TextLinkDisabledContent() {
  return (
    <div className="text-footnote">
      <TextLink disabled>Log Out</TextLink>
    </div>
  );
}
```

- **Focus:** the shared focus ring ([States](https://raft-design.botiverse.build/foundations/states.md)), 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](https://raft-design.botiverse.build/components/button.md).

## Content

- Start with a verb, or name the place: Forgot Password, Log Out, See All.
- Use Title Case, like every button label ([Writing](https://raft-design.botiverse.build/content/writing.md#casing)).

## 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. Emphasis comes from weight and ink, so pink stays with the one primary button.

## API

### TextLink

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"strong" \| "muted"` | `"muted"` |  |
| `render` | `ReactElement \| ((props, state) => ReactElement)` |  | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |

Also takes the attributes of its element.

## Changes

- 0.8.0 (Breaking Changes): **`Button` no longer has `variant="link"` or `size="inline"`.** Underlined text is now `TextLink`. A link inside a sentence (a banner's "View Billing") becomes `<TextLink variant="strong">`; a link on its own (Forgot Password, See All) becomes `<TextLink>`, which is muted. `TextLink` has no height, border or padding, so drop the classes that took them off.
- 0.8.0 (Breaking Changes): The activity inbox sidebar no longer styles `[data-activity-inbox-show-all]` as a link (it keeps only `whitespace-nowrap`). Render Show All as a `TextLink`.
- 0.8.0 (Added): `TextLink`: the bottom step of the button ladder, underlined text that takes the size of the text around it. It renders a `button`, or a real link with `render={<a href="…" />}`. `variant="muted"` (default) is for a link on its own; `variant="strong"` (ink, 600) is for a link inside a sentence.