# MediRadar Components

## Buttons

Hierarchy: primary, secondary, tertiary, destructive. Sizes: L 48px/20px inline padding, M 40px/16px, S 36px/12px, XS 32px/12px. States: default, hover, focus-visible, active, loading, disabled. Treat click as an event, not a persistent state. Do not use XS for critical patient-facing mobile actions.

## Fields

Minimum control height is 44px. Labels remain visible. Error text explains recovery and is connected with `aria-describedby`. Required and optional status is explicit. Placeholder text is never a label.

## Tables

Compact/default/comfortable row minimums are 44/52/60px. Use semantic headers and buttons for sortable columns. Right-align numeric measurements with tabular numerals. Allow wrapping and horizontal overflow on narrow layouts. Clinical abnormalities require icon and text, not color alone.

## Alerts and overlays

Use success, information, warning, and error only for their semantic meanings. Critical clinical alerts do not auto-dismiss. Destructive dialogs name the consequence, provide a safe cancel action, trap focus through the native dialog, and require explicit confirmation for irreversible actions.

## Logo

Preserve original proportions. Use symbol-only only where the product name is available from context or an accessible label.