On this page
Components
Batoi UIF components should support repeated operational work.
They should be compact, predictable, accessible, and easy to scan.
Component Categories
- action buttons
- status badges
- metric cards
- filters
- form controls
- tables
- preview panels
- code panels
- export actions
Button Guidance
Use icon plus text for commands.
Primary buttons should represent the next meaningful action. Secondary buttons should support preview, export, reset, or sample data actions.
Status Guidance
Status badges should be short and meaningful.
Examples:
- Draft
- Review-ready
- Submitted
- Active
- Pending
- Review
Preview Panels
Preview panels are useful when the user needs immediate feedback from inputs.
Theme Builder, AI App Builder, Workflow Form, and Resource Register all use preview panels.