Core Docs

UI Components

By Olivier Mironescu Added: 2026-06-03 12:00:00

UI Components



The UI layer (ui/v1.css) provides styled components built on top of the Design Standards tokens. It requires standards/v1.css to be loaded first.



Quick start



<link rel="stylesheet" href="/design/standards/v1.css">

<link rel="stylesheet" href="/design/ui/v1.css">




Buttons



Buttons are created with the .btn class plus a variant modifier. All buttons inherit the brand token colors.

Variants










<button class="btn btn--primary">Primary</button>

<button class="btn btn--secondary">Secondary</button>

<button class="btn btn--ghost">Ghost</button>

<button class="btn btn--danger">Danger</button>


Sizes



All variants support four sizes. Here is the primary button shown at each size:








<button class="btn btn--primary btn--s">Small</button>

<button class="btn btn--primary">Default</button>

<button class="btn btn--primary btn--l">Large</button>

<button class="btn btn--primary btn--xl">X-Large</button>


Available size classes: btn--s, (default), btn--l, btn--xl.

States



Buttons have built-in hover, focus-visible, and disabled states:








<button class="btn btn--primary">Default</button>

<button class="btn btn--primary" disabled>Disabled</button>

<button class="btn btn--secondary" disabled>Disabled</button>

<button class="btn btn--ghost" disabled>Disabled</button>




Cards



Cards provide a contained surface for content groupings.




Card Title



Some descriptive content inside a card component.








Interactive



This card has hover effects — try it.





<!-- Standard card -->

<div class="card">

  <div class="card__header">

    <h3>Card Title</h3>

  </div>

  <p>Content here.</p>

  <div class="card__footer">

    <button class="btn btn--primary btn--s">Action</button>

  </div>

</div>



<!-- Interactive card (hover effect) -->

<div class="card card--interactive">

  ...

</div>




Forms



Text inputs







We'll never share your email.















This field is required.



<!-- Text input -->

<div class="form-group">

  <label class="form-label" for="email">Email address</label>

  <input class="form-input" id="email" type="email" placeholder="you@example.com">

  <span class="form-hint">We'll never share your email.</span>

</div>



<!-- Textarea -->

<div class="form-group">

  <label class="form-label" for="bio">Bio</label>

  <textarea class="form-textarea" id="bio" placeholder="Tell us..."></textarea>

</div>



<!-- Select -->

<div class="form-group">

  <label class="form-label" for="country">Country</label>

  <select class="form-select" id="country">

    <option>Select...</option>

    <option>France</option>

  </select>

</div>



<!-- Checkbox -->

<label class="form-check">

  <input type="checkbox"> Email notifications

</label>



<!-- Error message -->

<span class="form-error">This field is required.</span>




Badges



Badges are compact labels used for status, categories, or counts.


Brand
Active
Pending
Expired
Info
Muted


<span class="badge badge--brand">Brand</span>

<span class="badge badge--success">Active</span>

<span class="badge badge--warning">Pending</span>

<span class="badge badge--danger">Expired</span>

<span class="badge badge--info">Info</span>

<span class="badge badge--neutral">Muted</span>




Tables
































Name Role Status Actions
Alice Martin Developer Active
Bob Ionescu Designer Pending
Clara Dumitru PM Inactive 


<table class="table">

  <thead>

    <tr>

      <th>Name</th>

      <th>Role</th>

      <th>Status</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Alice Martin</td>

      <td>Developer</td>

      <td><span class="badge badge--success">Active</span></td>

    </tr>

    <tr>

      <td>Bob Ionescu</td>

      <td>Designer</td>

      <td><span class="badge badge--warning">Pending</span></td>

    </tr>

  </tbody>

</table>




Progress bars





25% complete





60% complete





100% complete






<div class="progress">

  <div class="progress__bar" style="width: 60%"></div>

</div>


The bar width is controlled via the inline style attribute.



Spinner



A loading indicator for async operations.




Loading...



<div class="spinner"></div>

<span>Loading...</span>




Code / Pre / KBD




Inline code: const x = 42



Keyboard shortcut:


Ctrl + S

function hello() {

  console.log("Hello, world!");

}



<!-- Inline code -->

<code>const x = 42</code>



<!-- Keyboard -->

<kbd>Ctrl</kbd> + <kbd>S</kbd>



<!-- Code block -->

<pre><code>function hello() {

  console.log("Hello, world!");

}</code></pre>




9. Modal / Popup



The modal component creates centered overlay dialogs for forms, confirmations, login/register, etc.






<button onclick="UNVRSL.popup.show({

  title: 'Login',

  body: '<input class=\"form-input\" type=\"email\" placeholder=\"you@example.com\">',

  footer: '<button class=\"btn btn--primary\">Sign in</button>'

})">Show Popup</button>




10. Toast Notifications



Toasts slide in from the bottom-right. They support multiple types and optional progress bars.










// Simple toast

UNVRSL.toast.show({

  type: 'success',

  title: 'Changes saved',

  description: 'Your settings were updated.',

  duration: 4000

});



// Toast with progress bar (updatable)

var id = UNVRSL.toast.show({ type: 'success', title: 'Uploading...', duration: 0, progress: true });

UNVRSL.toast.update(id, { progress: 50 });

UNVRSL.toast.dismiss(id);




11. Alert Notifications



Alerts drop down from the top of the screen — ideal for quick feedback like input validation errors.









UNVRSL.alert.show({

  type: 'error',

  text: 'Please check your email address.',

  duration: 3000

});




Putting it all together



A small form using UI components with standards tokens:



Create account


Fill in the details below.





















```html
<div class="card" style="max-width: 480px">
<div class="card__header">
<h3>Create account</h3>
<p style="font-size: var(--text-s); color: var(--text-muted)">Fill in the details below.</p>
</div>

<div class="form-group">
<label class="form-label" for="name">Full name</label>
<input class="form-input" id="name" type="text" placeholder="John Doe">
</div>

<div class="form-group">
<label class="form-label" for="email">Email</label>
<input class="form-input" id="email" type="email" placeholder="john@example.com">
</div>

<label class="form-check" style="margin-bottom: 1.25rem">
<input type="checkbox" checked>
<span style="font-size: var(--text-s); color: var(--text-muted)">I agree to the terms</span>
</label>

<div class="inline" style="justify-content: space-between">
<button class="btn btn--primary">Sign up</button>
<button class="btn btn--ghost">Cancel</button>
</div>
</div>