Centrim Design System — a token-first, accessible React component system.
V2 audit — Overlays
Modal surfaces for focused work and decisions, plus the tooltip. Confirmation variants are separate components so the destructive path can never be styled as a neutral one.
Dialog
Focused task in a modal surface: create, edit, review.
DialogDialogContentDialogHeaderDialogTitleDialogFooterLive component
Legacy mapping
Legacy modals had three widths, two close-button positions and inconsistent footers. V2 fixes one structure.
| Attribute | Specification |
|---|---|
| Default | size="medium", header + body + footer |
| Variants | small · medium · large · scrollable body |
| Sizes | small (400px) · medium (512px) · large (720px) |
| States | open · closing · loading action · scrolled |
| Icon behaviour | X close IconButton top-right, labelled "Close"; optional tone icon in the header. |
| Spacing | Padding 24px; header/body/footer gap 16px; footer action gap 8px. |
| Typography | Title `text-heading-5`, body `text-body-sm`. |
| Border radius | `rounded-lg`. |
| Colour usage | `bg-surface` with `shadow-lg` over a scrim backdrop. |
| Responsive | Full-width minus 32px below `sm`; footer actions stack with the primary on top. |
When to use
- A short task that must not lose page context
When not to use
- Long forms — use a page
- Simple confirmation — use ConfirmDialog
Accessibility
- Radix Dialog: focus trap, restore on close, Escape to dismiss, labelled by its title.
- Primary action last in the footer on desktop.
ConfirmDialog
Neutral confirmation of a reversible but consequential action.
ConfirmDialogLive component
Legacy mapping
Legacy confirmations used generic "Are you sure? OK / Cancel" modals. V2 requires a verb-first confirm label.
| Attribute | Specification |
|---|---|
| Default | tone="neutral", confirm + cancel |
| Variants | neutral confirmation |
| Sizes | max-w-md |
| States | open · loading confirm |
| Icon behaviour | Info glyph in a `neutral-subtle` chip; hideable when the copy suffices. |
| Spacing | Padding 24px, gap 16px. |
| Typography | Title `text-heading-6`, description `text-body-sm`. |
| Border radius | `rounded-lg`. |
| Colour usage | Neutral surface; the confirm button carries `bg-primary`. |
| Responsive | Actions stack below `sm`, cancel last. |
When to use
- Publishing, sending, bulk applying
When not to use
- Irreversible deletion — use DestructiveConfirmDialog
Accessibility
- Radix AlertDialog: focus starts on the safe action; Escape cancels.
DestructiveConfirmDialog
Confirmation for irreversible loss.
DestructiveConfirmDialogLive component
Legacy mapping
Legacy delete flows reused the neutral modal with a red button only. V2 changes tone, icon, copy and label together.
| Attribute | Specification |
|---|---|
| Default | tone="destructive", confirm label "Delete" |
| Variants | destructive confirmation · with named item |
| Sizes | max-w-md |
| States | open · loading confirm |
| Icon behaviour | AlertOctagon in an `error-subtle` chip. |
| Spacing | Shared with ConfirmDialog. |
| Typography | Shared with ConfirmDialog; the item name is emphasised in the description. |
| Border radius | `rounded-lg`. |
| Colour usage | `bg-error` confirm button; the surface stays neutral so the copy stays readable. |
| Responsive | Shared with ConfirmDialog. |
When to use
- Deleting records, revoking access, discarding permanently
When not to use
- Reversible actions — the red treatment would cry wolf
Accessibility
- Focus starts on Cancel; the consequence is stated in text, not implied by the red button.
UnsavedChangesDialog
Three-way exit guard for a form with pending edits: save, discard, keep editing.
UnsavedChangesDialogLive component
Legacy mapping
Legacy forms used the browser's beforeunload prompt or lost edits silently.
| Attribute | Specification |
|---|---|
| Default | tone="warning", Keep editing / Discard / Save changes |
| Variants | save-discard-cancel |
| Sizes | max-w-md |
| States | open · saving |
| Icon behaviour | AlertTriangle in a `warning-subtle` chip. |
| Spacing | Shared with ConfirmDialog. |
| Typography | Shared with ConfirmDialog. |
| Border radius | `rounded-lg`. |
| Colour usage | Warning tone; Save is primary, Discard is tertiary. |
| Responsive | Three actions stack below `sm` in save → discard → keep-editing order. |
When to use
- Navigating away from a dirty form
When not to use
- Auto-saving surfaces
Accessibility
- Dismissing the dialog keeps the edits — the cancel path is always the safe one.
Tooltip
Supplementary hint on hover and focus.
TooltipTooltipProviderLive component
Legacy mapping
Legacy screens used `title` attributes, which are keyboard-inaccessible and untokenized.
| Attribute | Specification |
|---|---|
| Default | side="top", 200ms delay |
| Variants | label for an icon-only control · explanatory hint |
| Sizes | Single size, max-width 256px |
| States | hidden · visible · dismissed (Escape) |
| Icon behaviour | Often triggered by a HelpCircle at `--size-icon-xs`; the trigger is always focusable. |
| Spacing | Padding 8px/4px, offset 6px. |
| Typography | `text-caption`. |
| Border radius | `rounded-sm`. |
| Colour usage | `bg-background-inverse` + `text-text-inverse`. |
| Responsive | Suppressed on touch — the information must exist elsewhere too. |
When to use
- Naming icon-only controls
- Short clarification of a label
When not to use
- Required instructions — use helper text
- Anything interactive — use Popover
Accessibility
- Opens on focus as well as hover; Escape dismisses; never carries essential or interactive content.