Component Library
SA

Component Library

Design system reference — all AttOT UI components in one place.

1

Buttons

Sizes
With Icons
2

Badges

Normal Auto-Closed Edited Holiday Manual Warning Critical
With Icons
Present Absent Auto-Closed Edited
3

Cards

Stat Cards
Total Staff
48
+3 this month
Avg Attendance
94.2%
↑ 2.1% from last week
OT Hours
127.5h
This pay period
Active Units
5
Alpha, Bravo, Charlie, Delta, Echo
Regular Cards
Recent Activity
J. Smith punched in
Alpha Watch · 2 minutes ago
A. Khan auto-closed
Alpha Watch · 15 minutes ago
Shift Status
Morning Shift Active
Evening Shift Pending
Night Shift Pending
4

Form Elements

Name must be at least 3 characters.
Auto-close enabled
Email notifications
5

Tables

Staff Member Unit Shift Status Hours OT
J. Smith Alpha Watch Morning Present 7.5h 0.0h
A. Khan Alpha Watch Night Auto-Closed 8.0h 0.5h
F. Ali Alpha Watch Evening Pending — —
6

Alerts

Warning: A. Khan's shift has exceeded 8 hours and will be auto-closed at 23:59.
Error: Failed to save attendance record. Please try again or contact support.
Info: Week 27 timetable has been published. Staff can now view their schedules.
7

Punch States

Punch Banners
Punched In — 08:02 · Alpha Watch · Morning Shift
Not Punched In — No active shift
Auto-Closed — Punch auto-closed at 23:59 (8h limit)
Rest Period — Next eligible shift: 14:00
Punch Buttons
8

Avatars

JS
32px
AK
40px
FA
56px
SA
80px
9

Pagination

10

Loading States

Skeleton Loading
Spinner
11

Toast Notifications

Punch recorded successfully
You are now punched in for Morning shift.
Punch failed
Network error. Please check your connection.
Approaching shift limit
Your shift will auto-close in 15 minutes.
Schedule updated
Your timetable has been updated for next week.
12

Modal