Centrim Design System — a token-first, accessible React component system.
Links & text actions
The lightest rung of the action hierarchy: navigation links plus the small text actions that live inside lists, tables and repeatable form groups.
What is this?
TextLink for navigation and inline actions, AddItemAction / RemoveItemAction / ViewMoreAction for row-level text actions, LoadMore for incremental paging, and ChecklistProgress for count-based completion.
When to use it
- A control is secondary enough that a button would over-weight the layout
- A repeatable group needs an add or remove affordance under it
- A long collection is paged incrementally rather than by page number
How to use it
- Navigation renders an anchor (TextLink); actions render a button (AddItemAction and friends)
- Keep the label in props — no component hardcodes its own copy
- Pair LoadMore or Pagination with a collection, never both
What to avoid
- A text link performing a destructive commitment without confirmation
- Colour-only affordance: every link keeps an underline on hover and a focus ring
- One-off inline anchors styled by hand instead of TextLink
Text link
TextLink
The single text link of the system. Brand-coloured, underlined on hover, focus-ringed, and available as a quiet or destructive tone.
import { TextLink } from "@/design-system";
When to use
- Navigating to another screen or an external resource
- An inline action inside running body copy or a dense metadata row
When not to use
- The main commitment of a form or dialog — use Button
- An icon-only control — use IconButton with a label
With icons
Disabled
| Variant | Use |
|---|---|
| default | Standard navigation and lightweight actions |
| subtle | Quiet links inside dense metadata rows |
| destructive | Remove or delete text actions |
| inline | Links inside running body copy — always underlined |
Row-level text actions
Text actions
Button-backed text actions for repeatable content: add a row, remove a row, or expand a truncated list.
import { AddItemAction, RemoveItemAction, ViewMoreAction } from "@/design-system";
When to use
- Adding or removing entries in a repeatable form group or list
- Revealing the remainder of a deliberately truncated collection
When not to use
- Navigation — use TextLink
- The primary submit of a form — use Button
Add and remove
View more
Incremental paging
LoadMore
Centred load-more affordance for feeds and long tables, with a loading state, an optional progress line and an exhausted message.
import { LoadMore } from "@/design-system";
When to use
- An append-style collection where page numbers carry no meaning
- Activity feeds, notification lists and change logs
When not to use
- Data people navigate by position — use Pagination
- Alongside Pagination on the same collection
States
Showing 20 of 248
All records loaded
Checklist progress
ChecklistProgress
Count-based progress for checklists and task groups. Wraps Progress so the bar, colour and motion come from one implementation.
import { ChecklistProgress } from "@/design-system";
When to use
- A checklist or task group with a known number of steps
- A card footer summarising completion at a glance
When not to use
- Indeterminate work — use Progress without a value, or Spinner
- A single metric with no completion semantics — use Metric
Count and percentage
Do
- Use TextLink for navigation and AddItemAction for actions — the element matters
- Keep labels in props so the same component serves every screen
- Show a count next to any progress bar
Don't
- Style a bare anchor by hand
- Use a destructive text action without a confirmation dialog
- Mix LoadMore and Pagination on one collection