Skip to content

Atoms — small reusable UI elements

This page documents the Atoms located in app/frontend/src/components/atoms and gives a concise explanation of each atom’s responsibility and typical props.

Atoms index

  • Button.tsx
    • Purpose: Clickable action element used across the app.
    • Typical props: label | onClick | variant (primary/secondary) | disabled | className.
    • Notes: Presentational, accepts className for styling variations. See Button.scss.
  • DropdownSelection.tsx
    • Purpose: Multi-select / grouped dropdown used where multiple choices are allowed.
    • Typical props: options | selectedValues | onChange | placeholder | disabled.
    • Notes: Includes keyboard support and styled in DropdownSelection.scss.
  • SingleDropdownSelection.tsx
    • Purpose: Single-value dropdown input for selecting one option.
    • Typical props: options | value | onChange | placeholder | disabled.
    • Notes: Simpler surface than DropdownSelection, used for singular selections.
  • TextField.tsx
    • Purpose: Standard text input for forms and inline edits.
    • Typical props: value | onChange | placeholder | name | disabled | className.
    • Notes: Uses TextField.scss for layout and focus styles.
  • PasswordField.tsx
    • Purpose: Password input with visibility toggle and optional validation hints.
    • Typical props: value | onChange | placeholder | name | showToggle | className.
    • Notes: Accessibility: ensure toggle has accessible label. Styles in PasswordField.scss.
  • Loader.tsx
    • Purpose: Small loading indicator (spinner) used inline or centered in containers.
    • Typical props: size | inline | className.
    • Notes: Styling available in Loader.scss; keep visual weight minimal.
  • Tooltip.tsx
    • Purpose: Small hover/focus hint displayed near an anchor element.
    • Typical props: content | children (anchor) | placement | delay | className.
    • Notes: Use for contextual help; ensure aria-describedby linking for accessibility.
  • GlobalDialog.tsx
    • Purpose: Generic modal wrapper providing overlay, focus trap, and close handling.
    • Typical props: isOpen | onClose | title | children | className.
    • Notes: Use for arbitrary dialog content; keep the wrapper small and composable.
  • GlobalConfirmationDialog.tsx
    • Purpose: Ready-made confirmation modal with confirm/cancel actions.
    • Typical props: isOpen | message | onConfirm | onCancel | confirmLabel | cancelLabel.
    • Notes: Use when destructive or important actions require explicit confirmation.
  • PreviewDialog.tsx
    • Purpose: Modal used to preview content (images, documents, or HTML snippets).
    • Typical props: isOpen | onClose | content | contentType | className.
    • Notes: Keeps preview rendering isolated from business logic.
  • RecurrenceEditingForm.tsx
    • Purpose: Small form atom for editing recurrence rules (used inside scheduling flows).
    • Typical props: value | onChange | minDate | className.
    • Notes: Keeps recurrence UI focused and re-usable where schedule editing is required.