TBLR Button & Icon

Basic usage examples for the <tblr-button> and <tblr-icon> custom elements.

Standard Buttons

Primary Secondary Success Warning Danger Info Dark Light

Outline Buttons

Primary Secondary Success Warning Danger Info Dark Light

Ghost Buttons

Primary Secondary Success Warning Danger Info Dark Light

Square Buttons

Primary Secondary Success Warning Danger Info Dark Light

Action buttons

Buttons with icon

Save Add Notifications Settings Love Close Confirm Next Previous

Sizes

Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button

State

Disabled

Icons

Sample Code

<tblr-button variant="primary"> <tblr-icon name="check"></tblr-icon> Primary </tblr-button>

TBLR Badges

Small labels, counters, links, and dot indicators in Tabler colors.

Solid colors

Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan

Light colors

Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan

Pill counters and sizes

1 2 3 4 5 6 7 8 9 10 11 12

Dot badges

Online Away Busy Syncing Processing

Links and buttons

Tabler link Notifications 2 Profile Small Large

Sample Code

<tblr-badge color="blue">Blue</tblr-badge> <tblr-badge color="green" light dot dot-color="green">Online</tblr-badge>

TBLR Code Preview

Styled pre/code blocks with optional copy, line numbers, wrapping, and language labels.

const button = document.querySelector('tblr-button'); button.addEventListener('click', () => { console.log('Clicked'); });

Sample Code

<tblr-code-preview language="js" title="example.js" copy line-numbers> console.log('Hello world'); </tblr-code-preview>

TBLR Format Number

Manual decimal separators, thousand separators, currency symbols, symbol position, and precision.

US currency
European currency
No decimals
Inferred precision

Sample Code

<tblr-format-number value="1234.56" precision="2" currency-symbol="$"></tblr-format-number>

TBLR Relative Time

Localized relative time phrases with optional live updates, formatting styles, and numeric labels.

Past date lang EN
Short format lang ES
Numeric labels lang FR
Synced

Sample Code

<tblr-relative-time date="2020-07-15T09:17:00-04:00" sync></tblr-relative-time>

TBLR Include

Load an external HTML fragment into the page with cached fetch requests and Shoelace-style load events.

Local fragment

Loading include...

Missing fragment

Waiting for error...

Sample Code

<tblr-include src="/examples/include-fragment.html"></tblr-include>

TBLR Data Table

Remote server-backed table with sorting, filtering, page size controls, and pagination.

TBLR QR Code

Canvas QR codes with size, color, radius, and error correction controls.

Standard

Styled modules

Sample Code

<tblr-qr-code value="https://tabler.io/" label="Scan this code"></tblr-qr-code> <tblr-qr-code value="https://tabler.io/" size="192" fill="#206bc4" radius="0.35"></tblr-qr-code>

TBLR Cards

Tabler-style cards for common content blocks.

Simple card content. Cards use the default Tabler-like border, radius, background, and spacing. This card renders the title inside the card body, above the slotted content. The title is placed in a separated header with a subtle background. Use this when the surrounding layout already provides enough separation. The subtitle sits below the title and uses the global muted color token.

Footer and Middle Alignment

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

No results found

Try adjusting your search or filter to find what you're looking for.

Search again

Sample Code

<tblr-card title="Card title" subtitle="Card subtitle"> Card content </tblr-card>

TBLR Alerts and Toasts

Inline alerts, timed countdown alerts, and toast notifications.

This is informative.
You can tell by how useful the alert is. Non closable Your changes have been saved.
You can safely exit the page now. Your session is ending.
This alert shows a countdown bar and seconds remaining.
Primary toast Success toast Warning toast Danger toast

Sample Code

<tblr-alert variant="success" open closable> Changes saved </tblr-alert>

TBLR Copy Button

Copy direct values or values from other elements.

Direct value
+1 (234) 456-7890
Tabler Website
Missing target
Clipboard API only

Sample Code

<tblr-copy-button value="Tabler components"></tblr-copy-button>

TBLR Spinners

Border, grow, and animated dot loading indicators.

Sample Code

<tblr-spinner color="blue"></tblr-spinner> <tblr-spinner type="dots" color="success"></tblr-spinner>

TBLR Progress

Progress bars with labels, value display, variants, stripes, and indeterminate state.

Sample Code

<tblr-progress value="45" label="Upload" show-value></tblr-progress> <tblr-progress indeterminate color="primary"></tblr-progress>

TBLR Form Controls

Tabler-style inputs, selects, and search controls with AJAX form example.

Fetch results Populate from object 
Submit the form to see the AJAX response.

Sample Code

<tblr-form id="profile-form" action="/api/profile" method="post"> <tblr-input name="user[name]" label="Name"></tblr-input> <tblr-select name="role" label="Role" options="admin:Admin|editor:Editor"></tblr-select> <tblr-checkbox name="active" value="1" label="Active"></tblr-checkbox> <tblr-button type="submit">Save</tblr-button> </tblr-form> <script> const form = document.querySelector('#profile-form'); form.populate({ user: { name: 'Jane Doe' }, role: 'editor', active: true, }); form.addEventListener('tblr-success', event => { console.log(event.detail.data); }); </script>

Sample Code

<tblr-input label="Text" placeholder="Input placeholder"></tblr-input> <tblr-input label="Clearable" value="Clear me" clearable></tblr-input> <tblr-select label="Select" options="one:One|two:Two"></tblr-select> <tblr-select label="Advanced select" searchable placeholder="Search..." options="one:One|two:Two"></tblr-select> <tblr-autocomplete src="/examples/states.json" placeholder="Search states..."></tblr-autocomplete>

TBLR Choice Controls

Radio buttons, checkboxes, switches, file inputs, and masked-looking fields.

Radios

Inline Radios

Checkboxes

Inline Checkboxes

Checkboxes with description

Toggle switches

Single switch

Notification

Date of birth

Sample Code

<tblr-checkbox label="Checkbox input"></tblr-checkbox> <tblr-switch label="Toggle switch" checked></tblr-switch> <tblr-radio name="example" label="Option 1" checked></tblr-radio>

TBLR File Preview

Preview image, PDF, video, and audio files from a URL or from a File object assigned in JavaScript.

Sample Code

<tblr-file-preview src="/files/photo.jpg" alt="Product photo"></tblr-file-preview> <tblr-file-preview src="/files/invoice.pdf" type="pdf" title="Invoice" height="32rem"></tblr-file-preview> <tblr-file-preview src="/files/demo.mp4" type="video" poster="/files/demo.jpg"></tblr-file-preview> <tblr-file-preview src="/files/message.mp3" type="audio"></tblr-file-preview>

TBLR Rich Editor

WYSIWYG editing with colors, indent controls, undo/redo, and HTML source view.

Sample Code

<tblr-rich-editor label="Message" placeholder="Write something..."></tblr-rich-editor>

TBLR TinyMCE Editor

TinyMCE loaded behind a custom element with value, form, and event integration.

Sample Code

<tblr-tinymce-editor label="TinyMCE message"></tblr-tinymce-editor>

TBLR Colorpicker

Color palettes and native color input styles.

Sample Code

<tblr-colorpicker label="Color Input" type="check" value="#ffffff"></tblr-colorpicker>

TBLR Tabs

Horizontal and vertical tab navigation.

Overview

Use horizontal tabs when sections are peers in the same workflow.

Activity

Tab state is reflected through the value attribute and change event.

Disabled

This pane is unavailable.

Settings

Vertical tabs work well for longer labels or persistent side navigation.

Billing

Panels remain in the light DOM and the inactive panes are hidden.

Notifications

Keyboard navigation supports arrow keys, Home, and End.

Sample Code

<tblr-tabs value="overview"> <tblr-tab label="Overview" value="overview">Content</tblr-tab> </tblr-tabs>

TBLR Grid

Responsive and fixed column grid layouts.

128

New orders

42%

Conversion rate

$8.4k

Revenue

 This grid item spans two columns on wider screens and collapses to one column on mobile. Auto-fit grids fill the available width with stable minimum item sizes. Use row-gap and column-gap attributes when spacing needs to differ.

Sample Code

<tblr-grid columns="3" gap="md"> <tblr-card>1</tblr-card> <tblr-card>2</tblr-card> <tblr-card>3</tblr-card> </tblr-grid>

TBLR Flexbox

Direction, wrapping, spacing, and alignment utilities for flexible layouts.

Draft Assigned High priority Cancel Save changes 12 open tasks ready for review. Flexible items can grow at different rates. 8 tasks completed this week. Use direction="column" for stacked flows. Use gap, row-gap, and column-gap tokens or CSS lengths.

Sample Code

<tblr-flex align="center" justify="between" gap="md"> <div>Left</div> <div>Right</div> </tblr-flex>

TBLR Pagination

Page controls for compact and larger result sets.

Sample Code

<tblr-pagination page="1" pages="10"></tblr-pagination>

TBLR Modals

Simple, sized, scrollable, form, and status modal examples.

Simple modal Large modal Scrollable modal Modal with form Success modal Danger modal

Sample Code

<tblr-modal id="example-modal" title="Modal title" action="Save" cancel="Close"> Modal content </tblr-modal>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt.

Use the large modal size when the content needs more horizontal room, such as previews, details, or comparison layouts.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Your payment has been successfully submitted. Your invoice has been sent to your email address.

Do you really want to remove 84 files? This cannot be undone.