beyond components
Patterns
no data yet
Empty state
Show the user what action gets them to a filled state. Don't just say "No results." — tell them what to do next.
No projects yet
Create your first project to start tracking deliverables. You'll see them appear here as soon as they're saved.
waiting for data
Loading skeleton
Match the skeleton's shape to the content it's standing in for — rows for tables, lines for paragraphs, circles for avatars. Animated via pure CSS @keyframes, no JS timer needed.
interactive
Load → data / empty
Same table, three states: empty, loading skeleton, populated. Click the button to cycle.
No publications loaded
Click Load publications to populate the table.
destructive
Confirmation flow
For destructive actions (delete, revoke, purge) — always double-gate. The trigger lives in the table row / detail header; the confirmation uses a TuxModal with an explicit consequence statement. See TuxModal for a live demo.
inline feedback
Admonition stack
Use TuxAlert inline above a form or between sections. Avoid toasts for anything the user needs to read — toasts disappear.