Components

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
• dropdowns
• modals
• drawers and off-canvas panels
• tabs and accordions
• tooltips and popovers
• toasts and alerts
• navbars and command menus
• multi-image and testimonial carousels, lightbox, masonry, and grid media layouts
• declarative typed text
• preview panels
• code panels
• export actions
• editor surfaces

Declarative Activation

Server-rendered pages can use data-uif attributes so UIF can activate behavior after load.

<button type="button" data-uif-action="toggle" data-uif-target="#details">
  Toggle details
</button>

<table data-uif="table" data-uif-options='{"search":true,"selectable":true}'></table>

Typed Text

Use typed text for short, progressive emphasis where motion adds meaning. UIF owns its timers, exposes lifecycle cleanup, and renders the final text immediately when reduced motion is preferred.

<span
  data-uif="typed-text"
  data-uif-strings='["Governed interfaces", "Accessible workflows"]'
  data-uif-type-speed="45"
  data-uif-delete-speed="25"
></span>

Do not use typed text for essential instructions or information that must remain continuously visible.

Multi-item Carousels

UIF can show several items at once and move by a configured number of items. Status text remains accessible and reflects the visible range. This contract was introduced in version 2.3 and remains part of v3.

<section
  class="uif-carousel"
  data-uif="carousel"
  data-uif-items-per-slide="3"
  data-uif-step="2"
  aria-label="Featured applications"
  tabindex="0"
>
  <div class="uif-carousel-viewport">
    <article class="uif-carousel-slide" data-uif-role="slide" data-uif-state="active">...</article>
    <article class="uif-carousel-slide" data-uif-role="slide">...</article>
    <article class="uif-carousel-slide" data-uif-role="slide">...</article>
    <article class="uif-carousel-slide" data-uif-role="slide">...</article>
  </div>
  <button type="button" data-uif-action="previous">Previous</button>
  <span data-uif-role="status" aria-live="polite"></span>
  <button type="button" data-uif-action="next">Next</button>
</section>

Choose a step no larger than the visible group unless the product intentionally needs overlapping navigation. Keep keyboard controls and the live status region available.

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.

Library Reference

The public Component Gallery presents complete copy-ready markup for every maintained live preview, including carousel and typed-text examples.