Navigation
Link
A text link on an anchor or a button, in a sentence or standing alone.
| Class name | Type | Description |
|---|---|---|
linkplf:link | Component | A text link, on an anchor or a button |
link-mutedplf:link-muted | Style | Muted until hovered, for an action that stands alone |
Default
In a sentence, the accent and the medium weight set the link apart, without an underline.
Already have an account? Sign in
<p>Already have an account? <a class="link" href="#">Sign in</a></p><p>Already have an account? <a class="plf:link" href="#">Sign in</a></p>import { Link } from '@pelatform/react';
export function Example() {
return <p>Already have an account? <Link href="#">Sign in</Link></p>;
}import { Link } from '@pelatform/react/prefixed';
export function Example() {
return <p>Already have an account? <Link href="#">Sign in</Link></p>;
}Muted
For an action that stands alone, such as a password reset beside its field.
<a class="link link-muted" href="#">Forgot password?</a><a class="plf:link plf:link-muted" href="#">Forgot password?</a>import { Link } from '@pelatform/react';
export function Example() {
return <Link variant="muted" href="#">Forgot password?</Link>;
}import { Link } from '@pelatform/react/prefixed';
export function Example() {
return <Link variant="muted" href="#">Forgot password?</Link>;
}On a button
An action that runs a script stays a <button>; link drops the button’s own box. Disabled, it turns muted.
<button class="link">Resend code</button>
<button class="link" disabled>Resend code</button><button class="plf:link">Resend code</button>
<button class="plf:link" disabled>Resend code</button>import { linkClass } from '@pelatform/react';
export function Example() {
return (
<>
<button className={linkClass()}>Resend code</button>
<button className={linkClass()} disabled>Resend code</button>
</>
);
}import { linkClass } from '@pelatform/react/prefixed';
export function Example() {
return (
<>
<button className={linkClass()}>Resend code</button>
<button className={linkClass()} disabled>Resend code</button>
</>
);
}React
Link from @pelatform/react renders this anchor from its props, and linkClass() gives a <button> or a router’s Link the same classes.
| Prop | Values | Default |
|---|---|---|
variant |
muted, for an action that stands alone |
The accent |
The other props are an anchor’s, className and ref included; linkClass() takes variant. Beside Next.js’s Link, import this one under another name, such as import { Link as TextLink } from '@pelatform/react', or give next/link the classes with linkClass().
CSS variables
Override on a root or a single link.
| Variable | Default |
|---|---|
--plf-link-color |
--plf-color-primary-text; --plf-color-text-muted with link-muted |
--plf-link-hover-color |
primary-text with 10% of the text color; the text color with link-muted |