AegisX › Components
AegisX · Components

Token-driven component
primitives, production-ready.

Reusable CSS classes extracted from aegisx-ui production source. Copy tokens/css/components.css alongside tokens.css into your Angular app — every component reads --ax-* tokens, so theme flips cascade automatically.

Version
v0.1 · preview
Components
64 primitives
Source
aegisx-ui production
Driven by
--ax-* tokens

Button

Five variants × three sizes × four states. All transitions use --ax-duration-fast + --ax-easing-easeOut.

Variants

Sizes

States

Input

Form controls with consistent focus ring (--ax-brand-faint 3px) and error state.

We'll never share your email.
Format is HN-##### (digits only).

Card

Surface container with three elevation modes. Use for grouped content, list items, dashboard tiles.

Flat card

Default border, no shadow

Use for list items and dense layouts where elevation would compete.

Elevated card

elevation-1

Use for dashboard tiles and standalone content.

Floating card

elevation-3 · menus, popovers

Use sparingly — reserve for transient UI.

Alert · Banner

Inline message for status, validation, or system notices. Pairs role faint bg + emphasis text + default accent.

✓

Patient record saved

Updated by Dr. Chaiyaphum · 2 minutes ago.

!

Drug interaction possible

Warfarin + Aspirin — review anticoagulant protocol before dispense.

×

NHSO claim rejected

Missing ICD-10 secondary code. Edit claim HN-44821 to resubmit.

i

Scheduled downtime

System maintenance this Sunday 02:00–03:00 ICT.

Badge

Three styles × five roles = 15 combinations. Pick based on visual weight needed.

Solid

Active Pending Rejected Draft New

Soft

Active Pending Rejected Draft New

Outline

Active Pending Rejected Draft New

Chip

Removable tag for filters, selected items, multi-select.

Cardiology In-patient Today Priority: High

Dialog · Modal

Static preview of the dialog structure — wire up focus trap and role="dialog" in your framework.

Toast

Ephemeral notification with role-coded left border.

Lab results received for HN-44821.
4 draft claims ready to submit.
Medication stock low: Warfarin 5mg.
Failed to sync with HIS — retrying.

Avatar

Initials or image. Four sizes + role-coded variants.

SP จร AX Dr + ! X

Status dot

Inline indicator. Pair with text — never rely on color alone.

Active Idle Offline Unknown

Tab bar

Section navigation. Use aria-selected or .active for the current tab.

Pagination

Table companion. Use aria-current="page" for active.

Progress bar

Determinate progress. Role-coded variants for status.

72%
100%
45%

Spinner

Indeterminate loading. Three sizes.

Toggle

Boolean on/off switch.

Tooltip

CSS-only via data-tooltip attribute. Hover the buttons below.

Draft (4)

Stat card

Dashboard KPI tile. Number + label + trend.

Patients today 284 +12.3%
Bed occupancy 84/120 70%
Claim rejection 3.2% -0.8%

Key-value

Patient record layout. Striped variant via .ax-kv--striped.

HN 44821 ชื่อ-สกุล สมชาย ประเสริฐ Ward IPD 5A · Bed 12 Attending Dr. Chaiyaphum Mongkol Diagnosis DM type 2, uncontrolled (E11.65) Insurance UC

Empty state

No data, no results. Icon + title + description + optional CTA.

?

ไม่พบผลการค้นหา

ลองเปลี่ยนคำค้นหาหรือลบตัวกรองบางรายการ

Divider

Section separator. Subtle variant for tight spacing.

Content above
Subtle divider (--sm)
Default divider

Table

Untitled UI pattern. text-xs uppercase header, text-sm body, hover row.

HNชื่อ-สกุลWardStatus
44821สมชาย ประเสริฐIPD 5AActive
44822สมศรี วิชัยดิษฐ์OPDPending
44823อนุชา แก้วมณีERCritical

Checkbox

Styled checkbox. Hides native input, uses .ax-checkbox__box for visual.

Radio

Styled radio buttons.

Select

Native <select> with styled wrapper.

Kbd

Keyboard shortcut badge.

⌘K or CtrlShiftP

Code block + tabs

Syntax-highlighted code with language tabs.

import { getIconStyle } from '@aegisx-platform/design-system/icons/color-map'; const { style } = getIconStyle('pharmacy', 'md');
TypeScript Angular v19+

Field display

Read-only label:value. Mono variant for IDs and codes.

Patient ID HN-44821
Full name สมชาย ประเสริฐ
ICD-10 E11.65

Image preview

Card with hover overlay for zoom/view action.

preview
⤢

List

Generic styled list. Bordered variant with status dots.

  • Cardiology
  • Orthopedics
  • Radiology
  • Pathology

Circular progress

CSS SVG donut ring. Set stroke-dashoffset for percentage.

72
85%
100%

Segmented progress

Multi-step bar. Mark segments .done or .active.

Loading bar

Top-of-page indeterminate bar. Fixed position, z-index toast.

Content behind loading bar

Tab pills

Pill-shaped tabs (vs underline .ax-tabs).

Accordion

Expansion panel using native <details>.

Patient information
HN-44821 · สมชาย ประเสริฐ · IPD 5A Bed 12
Diagnosis history
DM type 2 (E11.65) · Hypertension (I10)
Medication
Metformin 500mg bid · Amlodipine 5mg od

Skeleton

Loading placeholder. No shimmer (per design principles).

Notification counter

Badge count on avatar or icon.

จร3
12

Section card

Card with labeled header section.

Insurance details
SchemeUC (บัตรทอง) Valid2026-01-01 → 2026-12-31

Select card

Selectable option. Use with radio logic.

UC (บัตรทอง)

NHSO universal coverage

SSO (ประกันสังคม)

Social Security Office

Self-pay

Cash / private insurance

Form section

Grouped fields with heading. Auto-grid for responsive columns.

Patient demographics

Basic identification information.

Contact

OTP input

Digit box grid for verification codes.

Error state

Like empty state but error-themed.

!

เกิดข้อผิดพลาด

ไม่สามารถเชื่อมต่อกับ HIS ได้ กรุณาลองใหม่อีกครั้ง

ERR_CONNECTION_TIMEOUT

Loading button

Button with inline spinner via .ax-button--loading.

Master-detail

List + detail split layout. Active item highlighted.

SP
สมชาย ประเสริฐ
HN-44821
SS
สมศรี วิชัยดิษฐ์
HN-44822
AK
อนุชา แก้วมณี
HN-44823

สมชาย ประเสริฐ

HN-44821 · IPD 5A · Bed 12

Active
DiagnosisDM type 2 (E11.65)AttendingDr. Chaiyaphum

Command palette

Search modal visual shell. Wire keyboard nav in framework.

⌘K
Registration ⌘1
OPD Queue
Pharmacy dispense
Lab results
↑↓ navigate↵ selectesc close

Launcher card

App module launcher grid. Works with diamond icons.

⚕
Registration
ลงทะเบียนผู้ป่วย
💊
Pharmacy
จ่ายยา
📊
Reports
รายงาน

Drawer

Slide-out panel (static preview — normally fixed positioned).

Patient details

HN44821Nameสมชาย ประเสริฐ

Page header

Title + breadcrumb + action buttons bar.

OPD Queue

วันนี้ 284 ราย · 12 รอตรวจ

Timeline

Vertical event log with status dots.

09:15
Registration
ลงทะเบียนผู้ป่วย HN-44821
09:32
Vitals recorded
BP 130/85 · HR 78 · Temp 36.8°C
10:00
Waiting for doctor
Queue #12

File upload

Dropzone with hover highlight.

↑
Click to upload or drag and drop
PDF, PNG, JPG up to 10MB

Splash screen

Full-page loading screen (static preview).

AegisX กำลังโหลด...

Button group

Joined buttons sharing borders. Untitled UI pattern.

With icons (data-icon-only)

Slider

Styled range input. Untitled UI thumb pattern.

65%
30%

Tag input

Inline tags with remove button + text input. Use for multi-select, tagging.

Cardiology DM type 2 Hypertension

Composition · Login form

Primitives composed into a real screen.

Sign in to AegisX

Hospital staff portal

Forgot password?