Components
Link
Unstable: navigation in text, always underlined so it is never told by colour alone; external links open in a new tab, show an arrow and say so. Import it from @nizivo/react/unstable/link.
Examples
Basic
Two links: one in the app, and one that opens another site in a new tab.
import type { JSX } from 'react';
import { Link } from '@nizivo/react/unstable/link';
export function LinkExample(): JSX.Element {
return (
<p style={{ display: 'flex', gap: 24, margin: 0 }}>
<Link href="/orders">View all orders</Link>
<Link href="https://example.com/help" external>
Help centre
</Link>
</p>
);
}
Import
import { Link } from '@nizivo/react/unstable/link';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/link.css';Static or interactive
Server. No client JavaScript: an <a>, or your router's link through render.
How to choose.
Use
A link goes somewhere; for an action, use a Button. It is underlined
in text/brand, so it is not told by colour alone (WCAG 1.4.1). external sets target="_blank"
and rel="noopener noreferrer", adds the arrow and reads "(opens in a new tab)" after the text
(labels.newTab).
Props
Server component Renders data-slot="link" with the class nz-link. Props: LinkProps. Source: src/unstable/link/link.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
external | boolean | false | Opens in a new tab ( |
labels | Partial<LinkLabels> | – | |
render | RenderProp<Record<string, never>> | – | Must render an |
- Also takes every attribute of
<a>. (ComponentPropsWithRef<"a">)
render takes an element, or, in client code, a function of the props and no state.
Other exports
LinkLabelstypeimport type { LinkLabels } from '@nizivo/react/unstable/link'Link's own strings (§16.4): serialisable, English defaults.
Name Type Default Description newTabrequiredstring'(opens in a new tab)'Read after an external link's text.
LinkPropstypeimport type { LinkProps } from '@nizivo/react/unstable/link'The props of
Link, listed above.
Data attributes and slots
Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.
| Slot | Rendered by | Data attributes |
|---|---|---|
link.nz-link | Linkroot (takes render); interactive, focus: self | none |
CSS hooks
Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.
This stylesheet reads no public hook.
Layers: nz.components. Classes: .nz-link, .nz-link-icon.
Tokens this stylesheet reads (5)
--nz-bg-brand-hover, --nz-font-label-m-font-weight, --nz-radius-xs, --nz-space-1, --nz-text-brand
Accessibility
These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:
link: draws the focus outline itself on keyboard focus.
Keyboard
To be written.
KpiTile
One number, its change and its shape, on Card's surface. Tint a row of related KPIs with tone, which no longer follows the trend. The Suspense fallback is the same tile with status="loading".
LivePulse
Unstable: a live or online mark, a dot whose ring grows and fades, always beside the words that say what is live. Import it from @nizivo/react/unstable/live-pulse.