INTERACTIVE PREVIEW

The building blocks.

Try a few ideas taking shape in Bajrelio UI.

Standalone website demos. The library is still in development.

Explore the preview, inspect the code, and copy what you need.

Each example is a standalone demo. Combine its HTML, CSS and JavaScript in your own page. These examples are not a released framework package.

What do the component statuses mean?

Demo: A working example to explore. Not a published library release.
In development: Implementation or verification is still underway.
Available: Included in a published release. No components have this status yet.

01 / COMPONENT DEMO

Buttons

Everyday actions, with clear states and a visible keyboard focus.

Demo

<div class="br-actions">
  <button type="button" class="br-button" data-message="Primary action selected.">Primary</button>
  <button type="button" class="br-button br-button--outline" data-message="Outline action selected.">Outline</button>
  <button type="button" class="br-button" disabled>Disabled</button>
</div>
<p id="button-result" role="status">Try a button.</p>

* { box-sizing: border-box; }
body { margin: 0; padding: 32px; font: 15px/1.6 "Open Sans", system-ui, sans-serif; color: #101936; background: #f1f6ff; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #075bff; outline-offset: 4px; }
.br-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid transparent; border-radius: 8px; background: #e30b5d; color: white; font-weight: 600; }
.br-button:hover { background: #bd084d; }
.br-button--outline { color: #101936; background: white; border-color: #9caac1; }
.br-button--outline:hover { background: #edf3ff; }
.br-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.br-button:disabled { cursor: not-allowed; opacity: .45; }
#button-result { color: #52617c; margin-top: 20px; }

document.querySelectorAll('[data-message]').forEach(button => {
  button.addEventListener('click', () => {
    document.querySelector('#button-result').textContent = button.dataset.message;
  });
});

Use it when

A user needs to perform an action, such as saving or confirming.

Keep in mind

Use a button for an action and a link for navigation. Set the button type explicitly inside forms.

02 / COMPONENT DEMO

Forms

A labeled field, helpful validation and a local success message.

Demo

<form id="email-form">
  <label for="email">Email address</label>
  <p id="email-help">Enter your email to try this local demo.</p>
  <input id="email" name="email" type="email" autocomplete="email"
    aria-describedby="email-help" placeholder="you@example.com" required>
  <button class="br-button" type="submit">Try form</button>
  <p id="form-result" role="status"></p>
</form>

* { box-sizing: border-box; }
body { margin: 0; padding: 32px; font: 15px/1.6 "Open Sans", system-ui, sans-serif; color: #101936; background: #f1f6ff; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #075bff; outline-offset: 4px; }
.br-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid transparent; border-radius: 8px; background: #e30b5d; color: white; font-weight: 600; }
.br-button:hover { background: #bd084d; }
.br-button--outline { color: #101936; background: white; border-color: #9caac1; }
.br-button--outline:hover { background: #edf3ff; }
form { max-width: 340px; }
label { font-weight: 600; }
#email-help { margin: 4px 0 12px; font-size: 13px; color: #52617c; }
input { display: block; width: 100%; padding: 10px 12px; margin-bottom: 16px; border: 1px solid #aebcd2; border-radius: 8px; background: white; }
#form-result { font-size: 13px; color: #19643b; }

document.querySelector('#email-form').addEventListener('submit', event => {
  event.preventDefault();
  document.querySelector('#form-result').textContent =
    'Valid email. This demo does not store or send your data.';
});

Use it when

You need a clear label and a familiar field for user input.

Keep in mind

Keep labels visible. This demo uses native validation; a real form still needs server-side handling and validation.

03 / COMPONENT DEMO

Cards

A small content block with a clear title and an optional action.

Demo

<article class="br-card" aria-labelledby="card-title">
  <span class="br-card__eyebrow">A SMALL BEGINNING</span>
  <h2 id="card-title">Your next great idea</h2>
  <p>A focused space for a title, a little context and one useful next step.</p>
  <a class="br-card__link" href="#card-details">Read more ↓</a>
  <p id="card-details">Make the content your own.</p>
</article>

* { box-sizing: border-box; }
body { margin: 0; padding: 32px; font: 15px/1.6 "Open Sans", system-ui, sans-serif; color: #101936; background: #f1f6ff; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #075bff; outline-offset: 4px; }
.br-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid transparent; border-radius: 8px; background: #e30b5d; color: white; font-weight: 600; }
.br-button:hover { background: #bd084d; }
.br-button--outline { color: #101936; background: white; border-color: #9caac1; }
.br-button--outline:hover { background: #edf3ff; }
.br-card { max-width: 350px; padding: 26px; border: 1px solid #dce5f4; border-radius: 16px; background: white; box-shadow: 0 6px 18px #1635740c; }
.br-card__eyebrow { color: #075bff; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.br-card h2 { font-size: 22px; line-height: 1.2; margin: 12px 0; }
.br-card p { color: #52617c; font-size: 13px; }
.br-card__link { color: #bd084d; font-weight: 600; text-underline-offset: 4px; }
#card-details { margin-bottom: 0; }

// No JavaScript is required for this component.

Use it when

Related content needs a title, a short summary and an optional next step.

Keep in mind

Keep the heading meaningful and do not nest links or buttons inside another link.

04 / COMPONENT DEMO

An expandable navigation panel with Escape and focus handling.

Demo

<nav class="br-nav" aria-label="Demo navigation">
  <div class="br-nav__top">
    <strong>Bajrelio UI</strong>
    <button type="button" class="br-button br-button--outline" id="menu-toggle"
      aria-expanded="false" aria-controls="menu-links">Menu</button>
  </div>
  <div id="menu-links" class="br-nav__links" hidden>
    <a href="#overview" aria-current="page">Overview</a>
    <a href="#examples">Examples</a>
    <a href="#resources">Resources</a>
  </div>
</nav>
<p id="overview">A simple disclosure menu. Try Menu, Tab and Escape.</p>
<p id="examples">Examples help explain the interface.</p>
<p id="resources">Start small, then make it yours.</p>

* { box-sizing: border-box; }
body { margin: 0; padding: 32px; font: 15px/1.6 "Open Sans", system-ui, sans-serif; color: #101936; background: #f1f6ff; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #075bff; outline-offset: 4px; }
.br-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid transparent; border-radius: 8px; background: #e30b5d; color: white; font-weight: 600; }
.br-button:hover { background: #bd084d; }
.br-button--outline { color: #101936; background: white; border-color: #9caac1; }
.br-button--outline:hover { background: #edf3ff; }
.br-nav { max-width: 440px; background: white; padding: 16px; border: 1px solid #dce5f4; border-radius: 12px; }
.br-nav__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.br-nav__links:not([hidden]) { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 18px; }
.br-nav a { color: #52617c; text-underline-offset: 4px; }
.br-nav a[aria-current] { color: #bd084d; }
p { font-size: 12px; color: #52617c; }

const toggle = document.querySelector('#menu-toggle');
const links = document.querySelector('#menu-links');
function closeMenu() {
  links.hidden = true;
  toggle.setAttribute('aria-expanded', 'false');
}
toggle.addEventListener('click', () => {
  const opening = toggle.getAttribute('aria-expanded') !== 'true';
  links.hidden = !opening;
  toggle.setAttribute('aria-expanded', String(opening));
});
document.addEventListener('keydown', event => {
  if (event.key === 'Escape' && !links.hidden) {
    closeMenu();
    toggle.focus();
  }
});
links.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', () => {
    closeMenu();
    toggle.focus();
  });
});

Use it when

A small set of links needs a compact, expandable navigation panel.

Keep in mind

This is a disclosure pattern, not an ARIA application menu. Keep keyboard access and Escape behavior intact.

05 / COMPONENT DEMO

Dialogs

A native modal dialog with a title, close controls and focus return.

Demo

<button class="br-button" type="button" id="open-dialog">Open dialog</button>
<p id="dialog-result" role="status">Try opening the dialog.</p>
<dialog class="br-dialog" id="demo-dialog" aria-labelledby="dialog-heading">
  <h2 id="dialog-heading">Make it yours.</h2>
  <p>A focused space for an important decision.</p>
  <div class="br-dialog__actions">
    <button type="button" class="br-button br-button--outline" id="cancel-dialog">Cancel</button>
    <button type="button" class="br-button" id="confirm-dialog">Confirm</button>
  </div>
</dialog>

* { box-sizing: border-box; }
body { margin: 0; padding: 32px; font: 15px/1.6 "Open Sans", system-ui, sans-serif; color: #101936; background: #f1f6ff; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #075bff; outline-offset: 4px; }
.br-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid transparent; border-radius: 8px; background: #e30b5d; color: white; font-weight: 600; }
.br-button:hover { background: #bd084d; }
.br-button--outline { color: #101936; background: white; border-color: #9caac1; }
.br-button--outline:hover { background: #edf3ff; }
.br-dialog { width: min(400px, calc(100% - 32px)); max-height: 80dvh; overflow: auto; padding: 24px; border: 1px solid #dce5f4; border-radius: 16px; color: #101936; }
.br-dialog::backdrop { background: #10193670; }
.br-dialog h2 { line-height: 1.2; margin-top: 0; }
.br-dialog p, #dialog-result { font-size: 13px; color: #52617c; }
.br-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

const dialog = document.querySelector('#demo-dialog');
const opener = document.querySelector('#open-dialog');
const result = document.querySelector('#dialog-result');
opener.addEventListener('click', () => dialog.showModal());
document.querySelector('#cancel-dialog').addEventListener('click', () => {
  dialog.close('cancel');
});
document.querySelector('#confirm-dialog').addEventListener('click', () => {
  dialog.close('confirm');
});
dialog.addEventListener('close', () => {
  result.textContent = dialog.returnValue === 'confirm' ? 'Action confirmed.' : 'Dialog closed.';
  opener.focus();
});
dialog.addEventListener('cancel', () => { dialog.returnValue = 'cancel'; });

Use it when

A focused decision needs the user’s attention before continuing.

Keep in mind

Give the dialog a title, preserve Escape behavior and return focus to the opener. Try the dialog inside its preview.

06 / COMPONENT DEMO

Feedback

A helpful status message that appears after a user action.

Demo

<button type="button" class="br-button" id="save-button">Save changes</button>
<div id="save-status" role="status" aria-live="polite"></div>
<p class="br-hint">A local demonstration. No changes are sent to a server.</p>

* { box-sizing: border-box; }
body { margin: 0; padding: 32px; font: 15px/1.6 "Open Sans", system-ui, sans-serif; color: #101936; background: #f1f6ff; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #075bff; outline-offset: 4px; }
.br-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border: 1px solid transparent; border-radius: 8px; background: #e30b5d; color: white; font-weight: 600; }
.br-button:hover { background: #bd084d; }
.br-button--outline { color: #101936; background: white; border-color: #9caac1; }
.br-button--outline:hover { background: #edf3ff; }
#save-status { margin-top: 20px; }
.br-notice { display: flex; align-items: center; gap: 10px; max-width: 380px; padding: 14px 18px; border: 1px solid #bce7cb; border-radius: 10px; background: #e1f8e9; color: #165c32; font-size: 14px; }
.br-hint { color: #52617c; font-size: 12px; }

const save = document.querySelector('#save-button');
const status = document.querySelector('#save-status');
save.addEventListener('click', () => {
  const message = document.createElement('p');
  message.className = 'br-notice';
  message.textContent = '✓ Changes saved in this demo.';
  status.replaceChildren(message);
});

Use it when

An action needs a clear result or a helpful status message.

Keep in mind

Announce updates without moving focus. Explain the result in text, and do not rely on color alone.

Make it yours.

Your next idea

SMALL DETAILS MATTER

Try the interactions.

Use Tab to explore, open the dialog, or switch the preview theme.

Follow what’s next.

Explore the roadmap for planned components and examples.

Explore components Follow the creator